feat(igxHierarchicalGrid): Allow binding row-island key property to complex object.

Author: MKirova

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.pipes.ts

@@ -1,5 +1,5 @@
 import { Inject, Pipe, PipeTransform } from '@angular/core';
-import { cloneArray } from '../../core/utils';
+import { cloneArray, resolveNestedPath } from '../../core/utils';
 import { DataUtil } from '../../data-operations/data-util';
 import { GridPagingMode } from '../common/enums';
 import { GridType, IGX_GRID_BASE } from '../common/grid.interface';
@@ -41,7 +41,8 @@ export class IgxGridHierarchicalPipe implements PipeTransform {
                 if (!v[childKey]) {
                     v[childKey] = [];
                 }
-                const childData = v[childKey];
+                const hasNestedPath = childKey?.includes('.');
+                const childData = !hasNestedPath ? v[childKey] : resolveNestedPath(v, childKey);
                 childGridsData[childKey] = childData;
             });
             if (grid.gridAPI.get_row_expansion_state(v)) {

src/app/hierarchical-grid/hierarchical-grid.sample.html

@@ -55,7 +55,7 @@ <h4 class="sample-title">Sample One</h4>
         <ng-template igxRowCollapsedIndicator>
             <igx-icon role="button">add</igx-icon>
         </ng-template>
-        <igx-row-island [rowDraggable]="true" [height]='"400px"' [showExpandAll]='true' [key]="'childData'"
+        <igx-row-island [rowDraggable]="true" [height]='"400px"' [showExpandAll]='true' [key]="'childData.Records'"
             [autoGenerate]="false" [allowFiltering]='true' [rowSelection]='selectionMode' [rowEditable]="true"
             [expandChildren]="firstLevelExpanded" #layout1  [allowFiltering]="true" filterMode="excelStyleFilter">
             <igx-grid-excel-style-filtering [minHeight]="'200px'" [maxHeight]="'360px'">
@@ -81,14 +81,14 @@ <h4 class="sample-title">Sample One</h4>
                     Moving child {{data.ProductName}}!
                 </div>
             </ng-template>
-            <igx-row-island [key]="'childData'" [autoGenerate]="false" [rowSelection]='selectionMode' [batchEditing]="true" [rowEditable]="true"
+            <igx-row-island [key]="'childData.Records'" [autoGenerate]="false" [rowSelection]='selectionMode' [batchEditing]="true" [rowEditable]="true"
                 [allowFiltering]="true">
                 <igx-column field="ID" [hasSummary]='true'></igx-column>
                 <igx-column-group header="Information3">
                     <igx-column [resizable]="true" field="ChildLevels"></igx-column>
                     <igx-column field="ProductName"></igx-column>
                 </igx-column-group>
-                <igx-row-island [key]="'childData'" [autoGenerate]="false" [rowSelection]='selectionMode' [batchEditing]="true" [rowEditable]="true">
+                <igx-row-island [key]="'childData.Records'" [autoGenerate]="false" [rowSelection]='selectionMode' [batchEditing]="true" [rowEditable]="true">
                     <igx-column field="ID" [hasSummary]='true'></igx-column>
                     <igx-column-group header="Information4">
                         <igx-column field="ChildLevels"></igx-column>
@@ -126,7 +126,7 @@ <h4 class="sample-title">Sample two</h4>
         <button igxButton="raised" (click)='toggleRootLevel()'>Toggle root level</button>
         <button igxButton="raised" (click)='toggleFirstIsland()'>Toggle level 1</button>
     </div>
-    <igx-hierarchical-grid [showExpandAll]='true' [primaryKey]="'ID'" [data]="localData" [autoGenerate]="true" [height]="'600px'"
+    <!-- <igx-hierarchical-grid [showExpandAll]='true' [primaryKey]="'ID'" [data]="localData" [autoGenerate]="true" [height]="'600px'"
         [width]="'800px'" [rowEditable]="true" #hGrid2>
         <igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelection]='selectionMode' [batchEditing]="true" [rowEditable]="true"
             [allowFiltering]="true">
@@ -179,5 +179,5 @@ <h4 class="sample-title">Sample 4</h4>
             <igx-column field="ID" header='ID' [hasSummary]='true' [dataType]="'number'"></igx-column>
             <igx-column *ngFor="let c of childColumns" [field]="c"></igx-column>
         </igx-row-island>
-    </igx-hierarchical-grid>
+    </igx-hierarchical-grid> -->
 </div>

src/app/hierarchical-grid/hierarchical-grid.sample.ts

@@ -49,10 +49,10 @@ export class HierarchicalGridSampleComponent implements AfterViewInit {
         this.data1 = this.localData.slice(0, 10);
         this.data2 = this.localData.slice(10, 20);
         this.localData1 = this.data1;
-        this.localData[0].hasChild = false;
-        this.localData[1].hasChild = false;
-        this.localData[2].childData[0].hasChild = false;
-        this.localData[2].childData[1].hasChild = false;
+        // this.localData[0].hasChild = false;
+        // this.localData[1].hasChild = false;
+        // this.localData[2].childData[0].hasChild = false;
+        // this.localData[2].childData[1].hasChild = false;
         this.selectionMode = GridSelectionMode.none;
     }
 
@@ -121,7 +121,9 @@ export class HierarchicalGridSampleComponent implements AfterViewInit {
                 Col1: i,
                 Col2: i,
                 Col3: i,
-                childData: children,
+                childData: {
+                    Records: children
+                },
                 childData2: i % 2 ? [] : children,
                 hasChild: true
             });