feat(hgrid): add row-selection templating #4998

IgniteUI · Aug 2, 2019 · ee7b766 · ee7b766
1 parent 814844c
commit ee7b766
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 12 deletions.
diff --git a/...ects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.component.ts b/...ects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.component.ts
@@ -1,6 +1,4 @@
 import {
-    QueryList,
-    ContentChildren,
     ElementRef,
     NgZone,
     ChangeDetectorRef,
@@ -11,7 +9,8 @@ import {
     Optional,
     Input,
     ViewChild,
-    TemplateRef
+    TemplateRef,
+    ContentChild
 } from '@angular/core';
 import { IgxGridBaseComponent, IgxGridTransaction, IGridDataBindable } from '../grid-base.component';
 import { GridBaseAPIService } from '../api.service';
@@ -28,6 +27,8 @@ import { IgxHierarchicalGridNavigationService } from './hierarchical-grid-naviga
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
 import { IgxGridSelectionService, IgxGridCRUDService } from '../../core/grid-selection';
 import { IgxChildGridRowComponent } from './child-grid-row.component';
+import { IgxRowSelectorDirective, IgxHeadSelectorDirective } from '../igx-selection.module';
+import { IgxCheckboxComponent } from '../../checkbox/checkbox.component';
 
 export const IgxHierarchicalTransactionServiceFactory = {
     provide: IgxGridTransaction,
@@ -149,6 +150,12 @@ export abstract class IgxHierarchicalGridBaseComponent extends IgxGridBaseCompon
      */
     public dragIndicatorIconTemplate: TemplateRef<any> = null;
 
+    @ContentChild(IgxRowSelectorDirective, { read: TemplateRef, static: true })
+    public rowSelectorTemplate: TemplateRef<IgxRowSelectorDirective>;
+
+    @ContentChild(IgxHeadSelectorDirective, { read: TemplateRef, static: true })
+    public headSelectorTemplate: TemplateRef<IgxHeadSelectorDirective>;
+
     /**
      * @hidden
      */

diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
@@ -30,12 +30,15 @@
                     </div>
                 </div>
             </ng-container>
-            <ng-container *ngIf="showRowCheckboxes">
-                <div class="igx-grid__cbx-selection" #headerCheckboxContainer [ngClass]="{
+            <ng-container *ngIf="showRowSelectors">
+                <div class="igx-grid__cbx-selection" #headerSelectorContainer [ngClass]="{
                         'igx-grid__cbx-selection--push': filteringService.isFilterRowVisible
                     }">
-                    <igx-checkbox [checked]="allRowsSelected" (change)="onHeaderCheckboxClick($event, filteredData)"
-                        disableRipple="true" [aria-label]="headerCheckboxAriaLabel" #headerCheckbox></igx-checkbox>
+                    <ng-template #headSelector
+                        *ngTemplateOutlet="
+                        this.headSelectorTemplate ? this.headSelectorTemplate : headSelectorBaseTemplate;
+                        context: {$implicit: { selectedCount: selectedRowsCount, totalCount: totalRowsCount }}">
+                    </ng-template>
                 </div>
             </ng-container>
             <ng-container *ngIf="pinnedColumns.length > 0">
@@ -87,7 +90,7 @@
             <!-- <ng-container *igxTemplateOutlet="(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)"></ng-container> -->
         </ng-template>
         <ng-template #hierarchical_record_template let-rowIndex="index" let-rowData>
-            <igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" #row>
+            <igx-hierarchical-grid-row [rowSelected]="rowSelected" [gridID]="id" [index]="rowIndex" [rowData]="rowData" #row>
             </igx-hierarchical-grid-row>
         </ng-template>
         <ng-template #child_record_template let-rowIndex="index" let-rowData>
@@ -203,5 +206,14 @@
     <igx-icon fontSet="material">drag_indicator</igx-icon>
 </ng-template>
 
+<ng-template  #headSelectorBaseTemplate>
+    <igx-checkbox 
+        [checked]="allRowsSelected"
+        (change)="onHeadSelectorClick($event, filteredData)"
+        disableRipple="true"
+        [aria-label]="headerCheckboxAriaLabel">
+    </igx-checkbox>
+</ng-template>
+
 <igx-grid-column-resizer *ngIf="colResizingService.showResizer"></igx-grid-column-resizer>
 <div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>
diff --git a/...ts/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts b/...ts/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts
@@ -484,7 +484,7 @@ describe('IgxHierarchicalGrid Integration', () => {
             fixture.detectChanges();
 
             const rootExpander =  (hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander;
-            const rootCheckbox =  hierarchicalGrid.headerCheckboxContainer;
+            const rootCheckbox =  hierarchicalGrid.headerSelectorContainer;
             const rootSummaryRow = hierarchicalGrid.summariesRowList.first.nativeElement;
             const rootSummaryIndentation = rootSummaryRow.querySelector(SUMMARIES_MARGIN_CLASS);
 

diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html
@@ -8,9 +8,12 @@
     </div>
 </ng-container>
 <ng-container *ngIf="rowSelectable">
-        <div class="igx-grid__cbx-selection">
-            <igx-checkbox [checked]="isSelected" (change)="onCheckboxClick($event)" disableRipple="true" [disableTransitions]="grid.disableTransitions" [aria-label]="rowCheckboxAriaLabel"></igx-checkbox>
-        </div>
+    <div class="igx-grid__cbx-selection">
+        <ng-template *ngTemplateOutlet="
+            this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;
+            context: {$implicit: {index: dataRowIndex, rowID: rowID, selected: isSelected}}">
+        </ng-template>
+    </div>
 </ng-container>
 
 <ng-container *ngIf="pinnedColumns.length > 0">
@@ -54,3 +57,12 @@
     </igx-hierarchical-grid-cell>
 </ng-template>
 
+<ng-template #rowSelectorBaseTemplate>
+        <igx-checkbox
+            [checked]="isSelected"
+            (change)="onRowSelect($event)"
+            disableRipple="true"
+            [disableTransitions]="grid.disableTransitions"
+            [aria-label]="rowCheckboxAriaLabel">
+        </igx-checkbox>
+</ng-template>