Skip to content

Commit 92bd943

Browse files
dkamburovdkamburov
authored
Merge pull request #12199 from IgniteUI/mkirova/expose-row-selector-template-inputs
feat(igxGrid): Add row selctor related template inputs.
2 parents 23fb0c2 + 6c9e256 commit 92bd943

File tree

5 files changed

+116
-28
lines changed

5 files changed

+116
-28
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ All notable changes for each version of this project will be documented in this
77
### New Features
88
- `igxGrid` - exposing new Input properties:
99

10+
- `headSelectorTemplate` - Gets/Sets the header row selector template.
11+
- `rowSelectorTemplate` - Gets/Sets the custom template used for row selectors.
12+
- `groupByRowSelectorTemplate` - Gets/Sets the custom template used for the group row selectors.
1013
- `sortHeaderIconTemplate` - Gets/Sets a custom template that should be used when rendering a header sorting indicator when columns are not sorted.
1114
- `sortAscendingHeaderIconTemplate` - Gets/Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in asc order.
1215
- `sortDescendingHeaderIconTemplate` - Gets/Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in desc order.

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts‎

Lines changed: 46 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1210,15 +1210,15 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
12101210
* @hidden
12111211
* @internal
12121212
*/
1213-
@ContentChildren(IgxHeadSelectorDirective, { read: IgxHeadSelectorDirective, descendants: false })
1214-
public headSelectorsTemplates: QueryList<IgxHeadSelectorDirective>;
1213+
@ContentChildren(IgxHeadSelectorDirective, { read: TemplateRef, descendants: false })
1214+
public headSelectorsTemplates: QueryList<TemplateRef<IgxHeadSelectorTemplateContext>>;
12151215

12161216
/**
12171217
* @hidden
12181218
* @internal
12191219
*/
1220-
@ContentChildren(IgxRowSelectorDirective, { read: IgxRowSelectorDirective, descendants: false })
1221-
public rowSelectorsTemplates: QueryList<IgxRowSelectorDirective>;
1220+
@ContentChildren(IgxRowSelectorDirective, { read: TemplateRef, descendants: false })
1221+
public rowSelectorsTemplates: QueryList<TemplateRef<IgxRowSelectorTemplateContext>>;
12221222

12231223
/**
12241224
* @hidden
@@ -2480,15 +2480,28 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
24802480
}
24812481

24822482
/**
2483-
* @hidden
2484-
* @internal
2483+
* Gets the header row selector template.
24852484
*/
2485+
@Input()
24862486
public get headSelectorTemplate(): TemplateRef<IgxHeadSelectorTemplateContext> {
2487-
if (this.headSelectorsTemplates && this.headSelectorsTemplates.first) {
2488-
return this.headSelectorsTemplates.first.templateRef;
2489-
}
2487+
return this._headSelectorTemplate || this.headSelectorsTemplates.first;
2488+
}
24902489

2491-
return null;
2490+
/**
2491+
* Sets the header row selector template.
2492+
* ```html
2493+
* <ng-template #template igxHeadSelector let-headContext>
2494+
* {{ headContext.selectedCount }} / {{ headContext.totalCount }}
2495+
* </ng-template>
2496+
* ```
2497+
* ```typescript
2498+
* @ViewChild("'template'", {read: TemplateRef })
2499+
* public template: TemplateRef<any>;
2500+
* this.grid.headSelectorTemplate = this.template;
2501+
* ```
2502+
*/
2503+
public set headSelectorTemplate(template: TemplateRef<IgxHeadSelectorTemplateContext>) {
2504+
this._headSelectorTemplate = template;
24922505
}
24932506

24942507
/**
@@ -2507,18 +2520,30 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
25072520
return this.pinning.rows !== RowPinningPosition.Bottom;
25082521
}
25092522

2510-
/**
2511-
* @hidden
2512-
* @internal
2523+
/**
2524+
* Gets the row selector template.
25132525
*/
2526+
@Input()
25142527
public get rowSelectorTemplate(): TemplateRef<IgxRowSelectorTemplateContext> {
2515-
if (this.rowSelectorsTemplates && this.rowSelectorsTemplates.first) {
2516-
return this.rowSelectorsTemplates.first.templateRef;
2517-
}
2518-
2519-
return null;
2528+
return this._rowSelectorTemplate || this.rowSelectorsTemplates.first;
25202529
}
25212530

2531+
/**
2532+
* Sets a custom template for the row selectors.
2533+
* ```html
2534+
* <ng-template #template igxRowSelector let-rowContext>
2535+
* <igx-checkbox [checked]="rowContext.selected"></igx-checkbox>
2536+
* </ng-template>
2537+
* ```
2538+
* ```typescript
2539+
* @ViewChild("'template'", {read: TemplateRef })
2540+
* public template: TemplateRef<any>;
2541+
* this.grid.rowSelectorTemplate = this.template;
2542+
* ```
2543+
*/
2544+
public set rowSelectorTemplate(template: TemplateRef<IgxRowSelectorTemplateContext>) {
2545+
this._rowSelectorTemplate = template;
2546+
}
25222547

25232548
/**
25242549
* @hidden @internal
@@ -3044,10 +3069,13 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
30443069
private _filteredSortedData = null;
30453070

30463071
private _customDragIndicatorIconTemplate: TemplateRef<IgxGridEmptyTemplateContext>;
3072+
private _rowSelectorTemplate: TemplateRef<IgxRowSelectorTemplateContext>;
3073+
private _headSelectorTemplate: TemplateRef<IgxHeadSelectorTemplateContext>;
30473074
private _rowEditTextTemplate: TemplateRef<IgxGridRowEditTextTemplateContext>;
30483075
private _rowAddTextTemplate: TemplateRef<IgxGridEmptyTemplateContext>;
30493076
private _rowEditActionsTemplate: TemplateRef<IgxGridRowEditActionsTemplateContext>;
30503077
private _dragGhostCustomTemplate: TemplateRef<IgxGridRowDragGhostContext>;
3078+
30513079
private _cdrRequests = false;
30523080
private _resourceStrings;
30533081
private _emptyGridMessage = null;

‎projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2192,5 +2192,26 @@ describe('IgxGrid - Row Selection #grid', () => {
21922192
const firstRootRow = grid.gridAPI.get_row_by_index(0);
21932193
expect(firstRootRow.nativeElement.querySelector('.rowNumber').textContent).toEqual('15');
21942194
});
2195+
2196+
it('Should allow setting row, group row and header custom templates via Input.', () => {
2197+
grid.rowSelectorTemplate = fix.componentInstance.customRowTemplate;
2198+
grid.headSelectorTemplate = fix.componentInstance.customHeaderTemplate;
2199+
grid.groupByRowSelectorTemplate = fix.componentInstance.customGroupRowTemplate;
2200+
2201+
fix.detectChanges();
2202+
grid.groupBy({
2203+
fieldName: 'CompanyName', dir: SortingDirection.Desc, ignoreCase: false
2204+
});
2205+
fix.detectChanges();
2206+
const rowDOM = grid.dataRowList.toArray()[0].nativeElement;
2207+
const groupRowDOM = grid.groupsRowList.toArray()[0].nativeElement
2208+
const rowSelector = rowDOM.querySelector(`.igx-grid__cbx-selection`);
2209+
const groupRowSelector = groupRowDOM.querySelector(`.igx-grid__cbx-selection`);
2210+
const headerSelector = GridSelectionFunctions.getHeaderRow(fix).querySelector(`.igx-grid__cbx-selection`);
2211+
2212+
expect(rowSelector.textContent).toBe('CUSTOM SELECTOR: 0');
2213+
expect(groupRowSelector.textContent).toBe('CUSTOM GROUP SELECTOR');
2214+
expect(headerSelector.textContent).toBe('CUSTOM HEADER SELECTOR');
2215+
});
21952216
});
21962217
});

‎projects/igniteui-angular/src/lib/grids/grid/grid.component.ts‎

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -243,8 +243,8 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
243243
* @hidden
244244
* @internal
245245
*/
246-
@ContentChildren(IgxGroupByRowSelectorDirective, { read: IgxGroupByRowSelectorDirective, descendants: false })
247-
protected groupByRowSelectorsTemplates: QueryList<IgxGroupByRowSelectorDirective>;
246+
@ContentChildren(IgxGroupByRowSelectorDirective, { read: TemplateRef, descendants: false })
247+
protected groupByRowSelectorsTemplates: QueryList<TemplateRef<IgxGroupByRowSelectorTemplateContext>>;
248248

249249
@ViewChildren(IgxGridGroupByRowComponent, { read: IgxGridGroupByRowComponent })
250250
private _groupsRowList: QueryList<IgxGridGroupByRowComponent>;
@@ -303,8 +303,11 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
303303
private _hideGroupedColumns = false;
304304
private _dropAreaMessage = null;
305305
private _showGroupArea = true;
306+
307+
private _groupByRowSelectorTemplate: TemplateRef<IgxGroupByRowSelectorTemplateContext>;
306308
private _detailTemplate;
307309

310+
308311
/**
309312
* Gets/Sets the array of data that populates the `IgxGridComponent`.
310313
*
@@ -567,14 +570,28 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
567570
}
568571

569572
/**
570-
* @hidden
571-
* @internal
573+
* Gets the group by row selector template.
572574
*/
573-
public get groupByRowSelectorTemplate(): TemplateRef<IgxGroupByRowSelectorTemplateContext> {
574-
if (this.groupByRowSelectorsTemplates && this.groupByRowSelectorsTemplates.first) {
575-
return this.groupByRowSelectorsTemplates.first.templateRef;
576-
}
577-
return null;
575+
@Input()
576+
public get groupByRowSelectorTemplate(): TemplateRef <IgxGroupByRowSelectorTemplateContext> {
577+
return this._groupByRowSelectorTemplate || this.groupByRowSelectorsTemplates.first;
578+
}
579+
580+
/**
581+
* Sets the group by row selector template.
582+
* ```html
583+
* <ng-template #template igxGroupByRowSelector let-groupByRowContext>
584+
* {{ groupByRowContext.selectedCount }} / {{ groupByRowContext.totalCount }}
585+
* </ng-template>
586+
* ```
587+
* ```typescript
588+
* @ViewChild("'template'", {read: TemplateRef })
589+
* public template: TemplateRef<any>;
590+
* this.grid.groupByRowSelectorTemplate = this.template;
591+
* ```
592+
*/
593+
public set groupByRowSelectorTemplate(template: TemplateRef<IgxGroupByRowSelectorTemplateContext>) {
594+
this._groupByRowSelectorTemplate = template;
578595
}
579596

580597
/**

‎projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1591,13 +1591,32 @@ export class DynamicColumnsComponent extends GridWithSizeComponent {
15911591
<igx-checkbox [checked]="headContext.totalCount === headContext.selectedCount"
15921592
(click)="onHeaderCheckboxClick($event, headContext)"></igx-checkbox>
15931593
</ng-template>
1594-
</igx-grid>`
1594+
</igx-grid>
1595+
<ng-template #customRow igxRowSelector let-rowContext>
1596+
<span class="rowNumber">CUSTOM SELECTOR: {{ rowContext.index }}</span>
1597+
</ng-template>
1598+
<ng-template #customHeader igxHeadSelector let-headContext>
1599+
<span>CUSTOM HEADER SELECTOR</span>
1600+
</ng-template>
1601+
<ng-template #customGroupRow igxGroupByRowSelector>
1602+
<span>CUSTOM GROUP SELECTOR</span>
1603+
</ng-template>
1604+
`
15951605
})
15961606
export class GridCustomSelectorsComponent extends BasicGridComponent implements OnInit {
15971607
@ViewChild('gridCustomSelectors', { static: true })
15981608
public grid: IgxGridComponent;
15991609
public rowCheckboxClick: any;
16001610
public headerCheckboxClick: any;
1611+
@ViewChild('customRow', {read: TemplateRef, static: true })
1612+
public customRowTemplate: TemplateRef<any>;
1613+
1614+
@ViewChild('customHeader', {read: TemplateRef, static: true })
1615+
public customHeaderTemplate: TemplateRef<any>;
1616+
1617+
@ViewChild('customGroupRow', {read: TemplateRef, static: true })
1618+
public customGroupRowTemplate: TemplateRef<any>;
1619+
16011620
public ngOnInit(): void {
16021621
this.data = SampleTestData.contactInfoDataFull();
16031622
}

0 commit comments

Comments
 (0)