feat(grid): row selection templating #4998

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -511,7 +511,7 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
         if (grid.rowSelectable && grid.selection.is_item_selected(grid.id, rowId)) {
             grid.deselectRows([rowId]);
         } else {
-            grid.checkHeaderCheckboxStatus();
+            grid.determineRowSelectionStatus();
         }
 
         this.deleteRowFromData(rowId, index);

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

@@ -88,10 +88,10 @@ import {
 } from './filtering/excel-style/grid.excel-style-filtering.component';
 import { IgxGridColumnResizerComponent } from './grid-column-resizer.component';
 import { IgxGridFilteringRowComponent } from './filtering/grid-filtering-row.component';
-import { IgxDragIndicatorIconDirective } from './row-drag.directive';
 import { IgxDragDirective } from '../directives/dragdrop/dragdrop.directive';
 import { DeprecateProperty } from '../core/deprecateDecorators';
 import { CharSeparatedValueData } from '../services/csv/char-separated-value-data';
+import { IgxHeadSelectorDirective, IgxRowSelectorDirective } from './igx-selection.module';
 
 const MINIMUM_COLUMN_WIDTH = 136;
 const FILTER_ROW_HEIGHT = 50;
@@ -258,6 +258,18 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     private _observer: MutationObserver;
     protected _destroyed = false;
     private overlayIDs = [];
+    public rowSelected = false;
+
+    /**
+     * @hidden
+     */
+    public selectedRowsCount = 0;
+
+    /**
+     * @hidden
+     */
+    public totalRowsCount = 0;
+
     /**
      * An accessor that sets the resource strings.
      * By default it uses EN resources.
@@ -1716,6 +1728,28 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     @ContentChildren(IgxGridToolbarCustomContentDirective, { read: IgxGridToolbarCustomContentDirective, descendants: false })
     public toolbarCustomContentTemplates: QueryList<IgxGridToolbarCustomContentDirective>;
 
+    public get headSelectorTemplate(): TemplateRef<IgxHeadSelectorDirective> {
+        if (this.headSelectorsTemplate && this.headSelectorsTemplate.first) {
+            return this.headSelectorsTemplate.first.templateRef;
+        }
+
+        return null;
+    }
+
+    @ContentChildren(IgxHeadSelectorDirective, { read: IgxHeadSelectorDirective, descendants: false })
+    public headSelectorsTemplate: QueryList<IgxHeadSelectorDirective>;
+
+    public get rowSelectorTemplate(): TemplateRef<IgxRowSelectorDirective> {
+        if (this.rowSelectorsTemplate && this.rowSelectorsTemplate.first) {
+            return this.rowSelectorsTemplate.first.templateRef;
+        }
+
+        return null;
+    }
+
+    @ContentChildren(IgxRowSelectorDirective, { read: IgxRowSelectorDirective, descendants: false })
+    public rowSelectorsTemplate: QueryList<IgxRowSelectorDirective>;
+
     /**
      * @hidden
      */
@@ -1749,8 +1783,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     /**
      * @hidden
      */
-    @ViewChild('headerCheckboxContainer', { static: false })
-    public headerCheckboxContainer: ElementRef;
+    @ViewChild('headerSelectorContainer', { static: false })
+    public headerSelectorContainer: ElementRef;
 
     /**
      * @hidden
@@ -1767,8 +1801,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     /**
      * @hidden
      */
-    @ViewChild('headerCheckbox', { read: IgxCheckboxComponent, static: false })
-    public headerCheckbox: IgxCheckboxComponent;
+    @ViewChild(IgxCheckboxComponent, { read: IgxCheckboxComponent, static: false })
+    public headSelectorBaseTemplate: IgxCheckboxComponent;
 
     /**
      * @hidden
@@ -1847,6 +1881,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      */
     @ViewChild('defaultRowEditTemplate', { read: TemplateRef, static: true })
     private defaultRowEditTemplate: TemplateRef<any>;
+
     /**
      * @hidden
      */
@@ -3317,7 +3352,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         return totalWidth;
     }
 
-    get showRowCheckboxes(): boolean {
+    get showRowSelectors(): boolean {
         return this.rowSelectable && this.hasVisibleColumns;
     }
 
@@ -4130,14 +4165,14 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
             return null;
         }
         const footerHeight = this.summariesHeight || this.tfoot.nativeElement.offsetHeight -
-        this.tfoot.nativeElement.clientHeight;
+            this.tfoot.nativeElement.clientHeight;
         let gridHeight;
         const computed = this.document.defaultView.getComputedStyle(this.nativeElement);
         const toolbarHeight = this.getToolbarHeight();
         const pagingHeight = this.getPagingHeight();
         const groupAreaHeight = this.getGroupAreaHeight();
         const renderedHeight = toolbarHeight + this.theadRow.nativeElement.offsetHeight +
-            footerHeight  + pagingHeight + groupAreaHeight +
+            footerHeight + pagingHeight + groupAreaHeight +
             this.scr.nativeElement.clientHeight;
 
         if (this.isPercentHeight) {
@@ -4194,8 +4229,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
                 parseInt(this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'), 10);
         }
 
-        if (this.showRowCheckboxes) {
-            computedWidth -= this.headerCheckboxContainer ? this.headerCheckboxContainer.nativeElement.offsetWidth : 0;
+        if (this.showRowSelectors) {
+            computedWidth -= this.headerSelectorContainer ? this.headerSelectorContainer.nativeElement.offsetWidth : 0;
         }
 
         const visibleChildColumns = this.visibleColumns.filter(c => !c.columnGroup);
@@ -4372,8 +4407,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     public getFeatureColumnsWidth() {
         let width = 0;
 
-        if (this.headerCheckboxContainer) {
-            width += this.headerCheckboxContainer.nativeElement.getBoundingClientRect().width;
+        if (this.headerSelectorContainer) {
+            width += this.headerSelectorContainer.nativeElement.getBoundingClientRect().width;
         }
         if (this.headerDragContainer) {
             width += this.headerDragContainer.nativeElement.getBoundingClientRect().width;
@@ -4575,48 +4610,59 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     /**
      * @hidden
      */
-    public onHeaderCheckboxClick(event, filteredData) {
-        this.allRowsSelected = event.checked;
-        const newSelection =
-            event.checked ?
-                filteredData ?
-                    this.selection.add_items(this.id, this.selection.get_all_ids(filteredData, this.primaryKey)) :
-                    this.selection.get_all_ids(this.gridAPI.get_all_data(true), this.primaryKey) :
-                filteredData ?
-                    this.selection.delete_items(this.id, this.selection.get_all_ids(filteredData, this.primaryKey)) :
-                    this.selection.get_empty();
-        this.triggerRowSelectionChange(newSelection, null, event, event.checked);
-        this.checkHeaderCheckboxStatus(event.checked);
+    public onHeadSelectorClick(event, filteredData) {
+        this.rowSelected = !this.rowSelected;
+        this.allRowsSelected = this.rowSelected;
+        let newSelection;
+        if (this.rowSelected) {
+            newSelection = filteredData ?
+                this.selection.add_items(this.id, this.selection.get_all_ids(filteredData, this.primaryKey)) :
+                this.selection.get_all_ids(this.gridAPI.get_all_data(true), this.primaryKey);
+        } else {
+            newSelection = filteredData ?
+                this.selection.delete_items(this.id, this.selection.get_all_ids(filteredData, this.primaryKey)) :
+                this.selection.get_empty();
+        }
+
+        this.triggerRowSelectionChange(newSelection, null, event, this.rowSelected);
+        this.determineRowSelectionStatus(this.rowSelected);
     }
 
     /**
      * @hidden
      */
     get headerCheckboxAriaLabel() {
         return this._filteringExpressionsTree.filteringOperands.length > 0 ?
-            this.headerCheckbox && this.headerCheckbox.checked ? 'Deselect all filtered' : 'Select all filtered' :
-            this.headerCheckbox && this.headerCheckbox.checked ? 'Deselect all' : 'Select all';
+            this.headSelectorBaseTemplate && this.headSelectorBaseTemplate.checked ? 'Deselect all filtered' : 'Select all filtered' :
+            this.headSelectorBaseTemplate && this.headSelectorBaseTemplate.checked ? 'Deselect all' : 'Select all';
     }
 
     /**
      * @hidden
      */
-    public checkHeaderCheckboxStatus(headerStatus?: boolean) {
+    public determineRowSelectionStatus(
+        headerStatus?: boolean): void {
         if (headerStatus === undefined) {
             const filteredData = this.filteringService.filteredData;
             const dataLength = filteredData ? filteredData.length : this.dataLength;
             this.allRowsSelected = this.selection.are_all_selected(this.id, dataLength);
-            if (this.headerCheckbox) {
-                this.headerCheckbox.indeterminate = !this.allRowsSelected && !this.selection.are_none_selected(this.id);
-                if (!this.headerCheckbox.indeterminate) {
-                    this.headerCheckbox.checked =
+            const areNoneSelected = this.selection.are_none_selected(this.id);
+            if (this.headSelectorBaseTemplate) {
+                this.headSelectorBaseTemplate.indeterminate = !this.allRowsSelected && !areNoneSelected;
+                if (!this.headSelectorBaseTemplate.indeterminate) {
+                    this.headSelectorBaseTemplate.checked =
                         this.allRowsSelected;
                 }
             }
-            this.cdr.markForCheck();
-        } else if (this.headerCheckbox) {
-            this.headerCheckbox.checked = headerStatus !== undefined ? headerStatus : false;
+        } else {
+            if (this.headSelectorBaseTemplate) {
+                this.headSelectorBaseTemplate.checked = headerStatus;
+            }
         }
+
+        this.selectedRowsCount = this.selectedRows().length;
+        this.totalRowsCount = this.gridAPI.get_all_data().length;
+        this.cdr.markForCheck();
     }
 
     /**
@@ -4649,32 +4695,32 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      * @hidden
      */
     public updateHeaderCheckboxStatusOnFilter(data) {
-        if (!data || !this.hasVisibleColumns || !this.headerCheckbox) {
-            this.checkHeaderCheckboxStatus();
+        if (!data || !this.hasVisibleColumns || !this.headSelectorBaseTemplate) {
+            this.determineRowSelectionStatus();
             return;
         }
         switch (this.filteredItemsStatus(this.id, data, this.primaryKey)) {
             case 'allSelected': {
                 if (!this.allRowsSelected) {
                     this.allRowsSelected = true;
                 }
-                if (this.headerCheckbox.indeterminate) {
-                    this.headerCheckbox.indeterminate = false;
+                if (this.headSelectorBaseTemplate.indeterminate) {
+                    this.headSelectorBaseTemplate.indeterminate = false;
                 }
                 break;
             }
             case 'noneSelected': {
                 if (this.allRowsSelected) {
                     this.allRowsSelected = false;
                 }
-                if (this.headerCheckbox.indeterminate) {
-                    this.headerCheckbox.indeterminate = false;
+                if (this.headSelectorBaseTemplate.indeterminate) {
+                    this.headSelectorBaseTemplate.indeterminate = false;
                 }
                 break;
             }
             default: {
-                if (!this.headerCheckbox.indeterminate) {
-                    this.headerCheckbox.indeterminate = true;
+                if (!this.headSelectorBaseTemplate.indeterminate) {
+                    this.headSelectorBaseTemplate.indeterminate = true;
                 }
                 if (this.allRowsSelected) {
                     this.allRowsSelected = false;
@@ -4862,7 +4908,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
                     if (col) {
                         const key = headers ? col.header || col.field : col.field;
                         record[key] = formatters && col.formatter ? col.formatter(source[row][col.field])
-                        : source[row][col.field];
+                            : source[row][col.field];
                     }
                 });
             }
@@ -4877,15 +4923,15 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     protected getSelectableColumnsAt(index) {
         if (this.hasColumnLayouts) {
             const visibleLayoutColumns = this.visibleColumns
-            .filter(col => col.columnLayout)
-            .sort((a, b) => a.visibleIndex - b.visibleIndex);
+                .filter(col => col.columnLayout)
+                .sort((a, b) => a.visibleIndex - b.visibleIndex);
             const colLayout = visibleLayoutColumns[index];
             return colLayout ? colLayout.children.toArray() : [];
         } else {
             const visibleColumns = this.visibleColumns
-            .filter(col => !col.columnGroup)
-            .sort((a, b) => a.visibleIndex - b.visibleIndex);
-            return [ visibleColumns[index] ];
+                .filter(col => !col.columnGroup)
+                .sort((a, b) => a.visibleIndex - b.visibleIndex);
+            return [visibleColumns[index]];
         }
     }
 
@@ -4915,7 +4961,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
             newSelectionAsSet.add(args.newSelection[i]);
         }
         this.selection.set(this.id, newSelectionAsSet);
-        this.checkHeaderCheckboxStatus(headerStatus);
+        this.determineRowSelectionStatus(headerStatus);
     }
 
     /**
@@ -4948,7 +4994,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         this.onGridCopy.emit(ev);
 
         if (ev.cancel) {
-             return;
+            return;
         }
 
         const transformer = new CharSeparatedValueData(ev.data, this.clipboardOptions.separator);
@@ -5642,7 +5688,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
             const index = args.context.index;
             args.view.detectChanges();
             const row = tmplId === 'dataRow' ? this.getRowByIndex(index) : null;
-            const summaryRow = tmplId === 'summaryRow' ? this.summariesRowList.toArray().find((sr) => sr.dataRowIndex === index) : null;
+            const summaryRow = tmplId === 'summaryRow' ? this.summariesRowList.toArray().find((sr) => sr.index === index) : null;
             if (row && row instanceof IgxRowComponent) {
                 this._restoreVirtState(row);
             } else if (summaryRow) {

projects/igniteui-angular/src/lib/grids/grid-common.module.ts

@@ -67,6 +67,7 @@ import { IgxGridExcelStyleFilteringModule } from './filtering/excel-style/grid.e
 import { IgxGridDragSelectDirective } from './drag-select.directive';
 import { IgxGridColumnResizerComponent } from './grid-column-resizer.component';
 import { IgxRowDragModule } from './row-drag.directive';
+import { IgxSelectorsModule } from './igx-selection.module';
 /**
  * @hidden
  */
@@ -193,7 +194,8 @@ import { IgxRowDragModule } from './row-drag.directive';
         IgxGridPipesModule,
         IgxGridExcelStyleFilteringModule,
         IgxRowDragModule,
-        IgxPaginatorModule
+        IgxPaginatorModule,
+        IgxSelectorsModule
     ],
     providers: [
         IgxGridSelectionService,