fix(igxHierarchicalGrid): Update existing child grids for RI on change. (#15935)

Author: MayaKirova

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

@@ -1685,6 +1685,33 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => {
 
         });
 
+        it('should allow changing row islands runtime in nested child grid.', () => {
+            const row = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+            UIInteractions.simulateClickAndSelectEvent(row.expander);
+            fixture.detectChanges();
+
+            let childGrid = hierarchicalGrid.gridAPI.getChildGrids()[0];
+            const childRow = childGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+            UIInteractions.simulateClickAndSelectEvent(childRow.expander);
+            fixture.detectChanges();
+
+            let hGrids = fixture.debugElement.queryAll(By.css('igx-hierarchical-grid'));
+            expect(hGrids.length).toBe(3);
+            expect(childGrid.gridAPI.getChildGrids().length).toBe(1);
+
+            fixture.componentInstance.toggleRINested = true;
+            fixture.detectChanges();
+
+            const nestedChildGrid = childGrid.gridAPI.getChildGrids()[0];
+            const nestedChildRow = nestedChildGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+            UIInteractions.simulateClickAndSelectEvent(nestedChildRow.expander);
+            fixture.detectChanges();
+
+            hGrids = fixture.debugElement.queryAll(By.css('igx-hierarchical-grid'));
+            expect(hGrids.length).toBe(4);
+            expect(nestedChildGrid.gridAPI.getChildGrids().length).toBe(1);
+        });
+
         it(`Should apply template to both parent and child grids`, () => {
             const customFixture = TestBed.createComponent(IgxHierarchicalGridCustomRowEditOverlayComponent);
             customFixture.detectChanges();
@@ -2146,6 +2173,10 @@ export class IgxHierarchicalGridSizingComponent {
             <igx-row-island key="childData" [autoGenerate]="true">
                 @if (toggleChildRI) {
                     <igx-row-island key="childData" [autoGenerate]="true">
+                    @if (toggleRINested) {
+                        <igx-row-island [key]="'childData'" [autoGenerate]="true">
+                        </igx-row-island>
+                    }
                     </igx-row-island>
                 }
             </igx-row-island>
@@ -2156,6 +2187,7 @@ export class IgxHierarchicalGridSizingComponent {
 export class IgxHierarchicalGridToggleRIComponent  extends IgxHierarchicalGridTestBaseComponent {
 public toggleRI = true;
 public toggleChildRI = true;
+public toggleRINested = false;
 }
 
 @Component({

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

@@ -422,7 +422,7 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
             .subscribe(() => {
                 this.updateChildren();
                 // update existing grids since their child ri have been changed.
-                this.getGridsForIsland(this.key).forEach(grid => {
+                this.rowIslandAPI.getChildGrids(false).forEach(grid => {
                     (grid as any).onRowIslandChange(this.children);
                 });
             });