Merge branch 'master' into mkirova/expose-excel-filtering-template

Author: dkamburov

CHANGELOG.md

@@ -9,6 +9,9 @@ All notable changes for each version of this project will be documented in this
 
     - `excelStyleHeaderIconTemplate` - Gets/Sets the excel style header icon.
     - `groupRowTemplate` - Gets/Sets the template reference for the group row.
+    - `headSelectorTemplate` - Gets/Sets the header row selector template.
+    - `rowSelectorTemplate` - Gets/Sets the custom template used for row selectors.
+    - `groupByRowSelectorTemplate` - Gets/Sets the custom template used for the group row selectors.
     - `sortHeaderIconTemplate` - Gets/Sets a custom template that should be used when rendering a header sorting indicator when columns are not sorted.
     - `sortAscendingHeaderIconTemplate` - Gets/Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in asc order.
     - `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

@@ -1210,15 +1210,15 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden
      * @internal
      */
-    @ContentChildren(IgxHeadSelectorDirective, { read: IgxHeadSelectorDirective, descendants: false })
-    public headSelectorsTemplates: QueryList<IgxHeadSelectorDirective>;
+    @ContentChildren(IgxHeadSelectorDirective, { read: TemplateRef, descendants: false })
+    public headSelectorsTemplates: QueryList<TemplateRef<IgxHeadSelectorTemplateContext>>;
 
     /**
      * @hidden
      * @internal
      */
-    @ContentChildren(IgxRowSelectorDirective, { read: IgxRowSelectorDirective, descendants: false })
-    public rowSelectorsTemplates: QueryList<IgxRowSelectorDirective>;
+    @ContentChildren(IgxRowSelectorDirective, { read: TemplateRef, descendants: false })
+    public rowSelectorsTemplates: QueryList<TemplateRef<IgxRowSelectorTemplateContext>>;
 
     /**
      * @hidden
@@ -2505,15 +2505,28 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
-     * @hidden
-     * @internal
+     * Gets the header row selector template.
      */
+    @Input()
     public get headSelectorTemplate(): TemplateRef<IgxHeadSelectorTemplateContext> {
-        if (this.headSelectorsTemplates && this.headSelectorsTemplates.first) {
-            return this.headSelectorsTemplates.first.templateRef;
-        }
+        return this._headSelectorTemplate || this.headSelectorsTemplates.first;
+    }
 
-        return null;
+    /**
+     * Sets the header row selector template.
+     * ```html
+     * <ng-template #template igxHeadSelector let-headContext>
+     * {{ headContext.selectedCount }} / {{ headContext.totalCount  }}
+     * </ng-template>
+     * ```
+     * ```typescript
+     * @ViewChild("'template'", {read: TemplateRef })
+     * public template: TemplateRef<any>;
+     * this.grid.headSelectorTemplate = this.template;
+     * ```
+     */
+    public set headSelectorTemplate(template: TemplateRef<IgxHeadSelectorTemplateContext>) {
+        this._headSelectorTemplate = template;
     }
 
     /**
@@ -2532,18 +2545,30 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         return this.pinning.rows !== RowPinningPosition.Bottom;
     }
 
-    /**
-     * @hidden
-     * @internal
+    /** 
+     * Gets the row selector template.
      */
+    @Input()
     public get rowSelectorTemplate(): TemplateRef<IgxRowSelectorTemplateContext> {
-        if (this.rowSelectorsTemplates && this.rowSelectorsTemplates.first) {
-            return this.rowSelectorsTemplates.first.templateRef;
-        }
-
-        return null;
+        return this._rowSelectorTemplate || this.rowSelectorsTemplates.first;
     }
 
+    /**
+         * Sets a custom template for the row selectors.
+         * ```html
+         * <ng-template #template igxRowSelector let-rowContext>
+         *    <igx-checkbox [checked]="rowContext.selected"></igx-checkbox>
+         * </ng-template>
+         * ```
+         * ```typescript
+         * @ViewChild("'template'", {read: TemplateRef })
+         * public template: TemplateRef<any>;
+         * this.grid.rowSelectorTemplate = this.template;
+         * ```
+         */
+    public set rowSelectorTemplate(template: TemplateRef<IgxRowSelectorTemplateContext>) {
+        this._rowSelectorTemplate = template;
+    }
 
     /**
      * @hidden @internal
@@ -3070,10 +3095,13 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
     private _customDragIndicatorIconTemplate: TemplateRef<IgxGridEmptyTemplateContext>;
     private _excelStyleHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext>;
+    private _rowSelectorTemplate: TemplateRef<IgxRowSelectorTemplateContext>;
+    private _headSelectorTemplate: TemplateRef<IgxHeadSelectorTemplateContext>;
     private _rowEditTextTemplate: TemplateRef<IgxGridRowEditTextTemplateContext>;
     private _rowAddTextTemplate: TemplateRef<IgxGridEmptyTemplateContext>;
     private _rowEditActionsTemplate: TemplateRef<IgxGridRowEditActionsTemplateContext>;
     private _dragGhostCustomTemplate: TemplateRef<IgxGridRowDragGhostContext>;
+
     private _cdrRequests = false;
     private _resourceStrings;
     private _emptyGridMessage = null;

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

@@ -2192,5 +2192,26 @@ describe('IgxGrid - Row Selection #grid', () => {
             const firstRootRow = grid.gridAPI.get_row_by_index(0);
             expect(firstRootRow.nativeElement.querySelector('.rowNumber').textContent).toEqual('15');
         });
+
+        it('Should allow setting row, group row and header custom templates via Input.', () => {
+            grid.rowSelectorTemplate = fix.componentInstance.customRowTemplate;
+            grid.headSelectorTemplate = fix.componentInstance.customHeaderTemplate;
+            grid.groupByRowSelectorTemplate = fix.componentInstance.customGroupRowTemplate;
+
+            fix.detectChanges();
+            grid.groupBy({
+                fieldName: 'CompanyName', dir: SortingDirection.Desc, ignoreCase: false
+            });
+            fix.detectChanges();
+            const rowDOM = grid.dataRowList.toArray()[0].nativeElement;
+            const groupRowDOM = grid.groupsRowList.toArray()[0].nativeElement
+            const rowSelector = rowDOM.querySelector(`.igx-grid__cbx-selection`);
+            const groupRowSelector = groupRowDOM.querySelector(`.igx-grid__cbx-selection`);
+            const headerSelector = GridSelectionFunctions.getHeaderRow(fix).querySelector(`.igx-grid__cbx-selection`);
+
+            expect(rowSelector.textContent).toBe('CUSTOM SELECTOR: 0');
+            expect(groupRowSelector.textContent).toBe('CUSTOM GROUP SELECTOR');
+            expect(headerSelector.textContent).toBe('CUSTOM HEADER SELECTOR');
+        });
     });
 });

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

@@ -243,8 +243,8 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      * @hidden
      * @internal
      */
-    @ContentChildren(IgxGroupByRowSelectorDirective, { read: IgxGroupByRowSelectorDirective, descendants: false })
-    protected groupByRowSelectorsTemplates: QueryList<IgxGroupByRowSelectorDirective>;
+    @ContentChildren(IgxGroupByRowSelectorDirective, { read: TemplateRef, descendants: false })
+    protected groupByRowSelectorsTemplates: QueryList<TemplateRef<IgxGroupByRowSelectorTemplateContext>>;
 
     @ViewChildren(IgxGridGroupByRowComponent, { read: IgxGridGroupByRowComponent })
     private _groupsRowList: QueryList<IgxGridGroupByRowComponent>;
@@ -303,8 +303,11 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     private _hideGroupedColumns = false;
     private _dropAreaMessage = null;
     private _showGroupArea = true;
+
+    private _groupByRowSelectorTemplate: TemplateRef<IgxGroupByRowSelectorTemplateContext>;
     private _detailTemplate;
 
+
     /**
      * Gets/Sets the array of data that populates the `IgxGridComponent`.
      *
@@ -567,14 +570,28 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     }
 
     /**
-     * @hidden
-     * @internal
+     * Gets the group by row selector template.
      */
-    public get groupByRowSelectorTemplate(): TemplateRef<IgxGroupByRowSelectorTemplateContext> {
-        if (this.groupByRowSelectorsTemplates && this.groupByRowSelectorsTemplates.first) {
-            return this.groupByRowSelectorsTemplates.first.templateRef;
-        }
-        return null;
+    @Input()
+    public get groupByRowSelectorTemplate(): TemplateRef <IgxGroupByRowSelectorTemplateContext> {
+        return this._groupByRowSelectorTemplate || this.groupByRowSelectorsTemplates.first;
+    }
+
+    /**
+     * Sets the group by row selector template.
+     * ```html
+     * <ng-template #template igxGroupByRowSelector let-groupByRowContext>
+     * {{ groupByRowContext.selectedCount }} / {{ groupByRowContext.totalCount  }}
+     * </ng-template>
+     * ```
+     * ```typescript
+     * @ViewChild("'template'", {read: TemplateRef })
+     * public template: TemplateRef<any>;
+     * this.grid.groupByRowSelectorTemplate = this.template;
+     * ```
+     */
+    public set groupByRowSelectorTemplate(template: TemplateRef<IgxGroupByRowSelectorTemplateContext>) {
+        this._groupByRowSelectorTemplate = template;
     }
 
     /**

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

@@ -1597,13 +1597,32 @@ export class DynamicColumnsComponent extends GridWithSizeComponent {
             <igx-checkbox [checked]="headContext.totalCount === headContext.selectedCount"
                 (click)="onHeaderCheckboxClick($event, headContext)"></igx-checkbox>
         </ng-template>
-    </igx-grid>`
+    </igx-grid>
+    <ng-template #customRow igxRowSelector let-rowContext>
+            <span class="rowNumber">CUSTOM SELECTOR: {{ rowContext.index }}</span>
+    </ng-template>
+    <ng-template #customHeader igxHeadSelector let-headContext>
+        <span>CUSTOM HEADER SELECTOR</span>
+    </ng-template>
+    <ng-template #customGroupRow igxGroupByRowSelector>
+        <span>CUSTOM GROUP SELECTOR</span>
+    </ng-template>
+    `
 })
 export class GridCustomSelectorsComponent extends BasicGridComponent implements OnInit {
     @ViewChild('gridCustomSelectors', { static: true })
     public grid: IgxGridComponent;
     public rowCheckboxClick: any;
     public headerCheckboxClick: any;
+    @ViewChild('customRow', {read: TemplateRef, static: true })
+    public customRowTemplate: TemplateRef<any>;
+
+    @ViewChild('customHeader', {read: TemplateRef, static: true })
+    public customHeaderTemplate: TemplateRef<any>;
+
+    @ViewChild('customGroupRow', {read: TemplateRef, static: true })
+    public customGroupRowTemplate: TemplateRef<any>;
+
     public ngOnInit(): void {
         this.data = SampleTestData.contactInfoDataFull();
     }