feat(tree-grid): add row-selection templating #4998

IgniteUI · Aug 1, 2019 · 653ee56 · 653ee56
1 parent be86bb9
commit 653ee56
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html
@@ -5,7 +5,7 @@
 </ng-container>
 <ng-container *ngIf="rowSelectable">
     <div class="igx-grid__cbx-selection">
-        <igx-checkbox [checked]="isSelected" [disabled]="deleted" (change)="onCheckboxClick($event)" disableRipple="true" [disableTransitions]="grid.disableTransitions" [aria-label]="rowCheckboxAriaLabel"></igx-checkbox>
+        <igx-checkbox [checked]="isSelected" [disabled]="deleted" (change)="onRowSelect($event)" disableRipple="true" [disableTransitions]="grid.disableTransitions" [aria-label]="rowCheckboxAriaLabel"></igx-checkbox>
     </div>
 </ng-container>
 <ng-container *ngIf="pinnedColumns.length > 0">

diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
@@ -20,12 +20,13 @@
                     </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">
+                    </ng-template>
                 </div>
             </ng-container>
             <ng-container *ngIf="pinnedColumns.length > 0">
@@ -75,7 +76,7 @@
             [igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" #verticalScrollContainer
             (onChunkPreload)="dataLoading($event)">
             <ng-template #record_template>
-                <igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData" #row>
+                <igx-tree-grid-row [rowSelected]="rowSelected" [gridID]="id" [index]="rowIndex" [treeRow]="rowData" #row>
                 </igx-tree-grid-row>
             </ng-template>
             <ng-template #summary_template>
@@ -187,5 +188,10 @@
     <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/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts
@@ -43,6 +43,7 @@ import { first, takeUntil } from 'rxjs/operators';
 import { IgxRowLoadingIndicatorTemplateDirective } from './tree-grid.directives';
 import { IgxForOfSyncService } from '../../directives/for-of/for_of.sync.service';
 import { IgxDragIndicatorIconDirective } from '../row-drag.directive';
+import { IgxHeadSelectorDirective, IgxRowSelectorDirective } from '../igx-selection.module';
 
 let NEXT_ID = 0;
 
@@ -324,6 +325,12 @@ export class IgxTreeGridComponent extends IgxGridBaseComponent implements IGridD
     @ContentChild(IgxDragIndicatorIconDirective, { read: TemplateRef, static: true })
     public dragIndicatorIconTemplate: TemplateRef<any> = null;
 
+    @ContentChild(IgxHeadSelectorDirective, {read: TemplateRef, static: true})
+    public headSelectorTemplate: TemplateRef<IgxHeadSelectorDirective>;
+
+    @ContentChild(IgxRowSelectorDirective, {read: TemplateRef, static: true})
+    public rowSelectorTemplate: TemplateRef<IgxRowSelectorDirective>;
+
     /**
      * An @Input property that provides a template for the row loading indicator when load on demand is enabled.
      * ```html