fix(h-grid): add null checks for child data - 20.0.x (#15930)

* fix(h-grid): add null checks for child data

Author: igdmdimitrov

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts

@@ -27,7 +27,7 @@ import { QueryBuilderFunctions } from '../../query-builder/query-builder-functio
 import { By } from '@angular/platform-browser';
 import { IgxDateTimeEditorDirective } from '../../directives/date-time-editor/date-time-editor.directive';
 import { QueryBuilderSelectors } from '../../query-builder/query-builder.common';
-import { IgxHGridRemoteOnDemandComponent } from '../hierarchical-grid/hierarchical-grid.spec';
+import { IgxHGridRemoteOnDemandComponent, IgxHierarchicalGridMissingChildDataComponent } from '../hierarchical-grid/hierarchical-grid.spec';
 import { IGridResourceStrings } from '../../core/i18n/grid-resources';
 
 describe('IgxGrid - Advanced Filtering #grid - ', () => {
@@ -1898,6 +1898,19 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
             expect(operatorSelect.querySelector('input').value).toBe('My In');
             expect(Array.from(operatorSelect.querySelectorAll('igx-select-item')).pop().textContent).toBe('My Not In');
         }));
+
+        it('Should not throw an error when some child data is missing.', fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxHierarchicalGridMissingChildDataComponent);
+            const hierarchicalGrid = fixture.componentInstance.hGrid;
+            hierarchicalGrid.allowAdvancedFiltering = true;
+            fixture.detectChanges();
+
+            // Open Advanced Filtering dialog.
+            expect(() => {
+                hierarchicalGrid.openAdvancedFilteringDialog();
+                fixture.detectChanges();
+            }).not.toThrow();
+        }));
     });
 });
 

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

@@ -1256,7 +1256,9 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
             ];
 
             entities[0].childEntities = this.childLayoutList.reduce((acc, rowIsland) => {
-                return acc.concat(this.generateChildEntity(rowIsland, this.data[0][rowIsland.key][0]));
+                const childFirstRowData = this.data?.length > 0 && this.data[0][rowIsland.key]?.length > 0 ?
+                    this.data[0][rowIsland.key][0] : null;
+                return acc.concat(this.generateChildEntity(rowIsland, childFirstRowData));
             }
             , []);
         }
@@ -1289,7 +1291,9 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
             if (!firstRowData) {
                 return null;
             }
-            return acc.concat(this.generateChildEntity(childRowIsland, firstRowData[childRowIsland.key][0]));
+            const childFirstRowData = firstRowData.length > 0 && firstRowData[childRowIsland.key]?.length > 0 ?
+                firstRowData[childRowIsland.key][0] : null;
+            return acc.concat(this.generateChildEntity(childRowIsland, childFirstRowData));
         }, []);
 
         if (rowIslandChildEntities?.length > 0) {

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

@@ -2509,3 +2509,31 @@ export class IgxHierarchicalGridEmptyTemplateComponent extends IgxHierarchicalGr
         this.childGridRef = grid;
     }
 }
+
+@Component({
+    template: `
+    <igx-hierarchical-grid #hGrid [data]="data" [autoGenerate]="false"
+        [height]="'400px'" [width]="'500px'">
+        <igx-column field="root1" [dataType]="'number'"></igx-column>
+        <igx-column field="root2" [dataType]="'number'"></igx-column>
+        <igx-row-island [key]="'level1data'" [autoGenerate]="false">
+            <igx-column field="level1child1" [dataType]="'number'"></igx-column>
+            <igx-column field="level1child2" [dataType]="'number'"></igx-column>
+            <igx-row-island [key]="'level2data'" [autoGenerate]="false">
+                <igx-column field="level2child1" [dataType]="'number'"></igx-column>
+                <igx-column field="level2child2" [dataType]="'number'"></igx-column>
+            </igx-row-island>
+        </igx-row-island>
+    </igx-hierarchical-grid>`,
+    imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent]
+})
+export class IgxHierarchicalGridMissingChildDataComponent {
+    @ViewChild('hGrid', { read: IgxHierarchicalGridComponent, static: true })
+    public hGrid: IgxHierarchicalGridComponent;
+
+    public data = [
+        { root1: 1, root2: 1, level1data: [{ level1child1: 11, level1child2: 12 }] }, // missing level2data
+        { root1: 2, root2: 2, level1data: [{ level1child1: 21, level1child2: 22, level2data: [{ level2child1: 31, level2child2: 32 }] }] },
+        { root1: 3, root2: 3, level1data: [] }
+    ];
+}