feat(hierarchical-grid): add parentRowData to IGridCreatedEventArgs

Author: viktorkombov

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

@@ -7,4 +7,5 @@ export interface IGridCreatedEventArgs extends IBaseEventArgs {
     owner: IgxRowIslandComponent;
     parentID: any;
     grid: IgxHierarchicalGridComponent;
+    parentRowData?: any;
 }

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

@@ -196,8 +196,9 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit {
      */
     public ngOnInit() {
         const ref = this.container.createComponent(IgxHierarchicalGridComponent, { injector: this.container.injector });
+        const childGridData = this.data.childGridsData[this.layout.key];
         this.hGrid = ref.instance;
-        this.hGrid.setDataInternal(this.data.childGridsData[this.layout.key]);
+        this.hGrid.setDataInternal(childGridData);
         this.hGrid.nativeElement["__componentRef"] = ref;
         this.layout.layoutChange.subscribe((ch) => {
             this._handleLayoutChanges(ch);
@@ -214,7 +215,8 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit {
         this.layout.gridCreated.emit({
             owner: this.layout,
             parentID: this.data.rowID,
-            grid: this.hGrid
+            grid: this.hGrid,
+            parentRowData: !childGridData?.length ? this.data.parentRowData : undefined,
         });
     }
 
@@ -231,7 +233,8 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit {
         this.layout.gridInitialized.emit({
             owner: this.layout,
             parentID: this.data.rowID,
-            grid: this.hGrid
+            grid: this.hGrid,
+            parentRowData: !this.hGrid.data.length ? this.data.parentRowData : undefined,
         });
 
         this.hGrid.cdr.detectChanges();

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

@@ -49,7 +49,7 @@ export class IgxGridHierarchicalPipe implements PipeTransform {
                 childGridsData[childKey] = childData;
             });
             if (grid.gridAPI.get_row_expansion_state(v)) {
-                result.push({ rowID: primaryKey ? v[primaryKey] : v, childGridsData });
+                result.push({ rowID: primaryKey ? v[primaryKey] : v, childGridsData, parentRowData: v });
             }
         });
         return result;

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

@@ -686,12 +686,14 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => {
             fixture.detectChanges();
             const childGrids = hierarchicalGrid.gridAPI.getChildGrids(false);
             const childRows = fixture.debugElement.queryAll(By.directive(IgxChildGridRowComponent));
-            expect(childGrids.length).toBe(2);
-            expect(childRows.length).toBe(2);
+            expect(childGrids.length).toBe(3);
+            expect(childRows.length).toBe(3);
             const ri1 = fixture.componentInstance.rowIsland1;
             const ri2 = fixture.componentInstance.rowIsland2;
+            const ri3 = fixture.componentInstance.rowIsland3;
             expect(childRows[0].componentInstance.layout).toBe(ri1);
             expect(childRows[1].componentInstance.layout).toBe(ri2);
+            expect(childRows[2].componentInstance.layout).toBe(ri3);
         });
 
         it('should display correct data for sibling row islands', () => {
@@ -865,18 +867,21 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => {
             fixture.detectChanges();
 
             const children = hierarchicalGrid.gridAPI.getChildGrids(true);
-            expect(children.length).toBe(2);
+            expect(children.length).toBe(3);
             const child1 = children[0] as IgxHierarchicalGridComponent;
             const child2 = children[1] as IgxHierarchicalGridComponent;
+            const child3 = children[2] as IgxHierarchicalGridComponent;
             expect(child1._destroyed).toBeFalsy();
             expect(child2._destroyed).toBeFalsy();
+            expect(child3._destroyed).toBeFalsy();
             hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.dataView.length - 1);
             await wait();
             fixture.detectChanges();
 
             // check that we have child is not destroyed
             expect(child1._destroyed).toBeFalsy();
             expect(child2._destroyed).toBeFalsy();
+            expect(child3._destroyed).toBeFalsy();
 
             // destroy hgrid
             fixture.destroy();
@@ -1119,6 +1124,32 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => {
             expect(getterSpy).toHaveBeenCalledTimes(7);
             expect(summaryCell.textContent.trim()).toEqual('');
         }));
+
+        it('should verify gridCreated and gridInitialized events emit correct parentRowData for grids with and without data.', () => {
+            const row = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+            const ri1 = fixture.componentInstance.rowIsland1;
+            const ri3 = fixture.componentInstance.rowIsland3;
+
+            spyOn(ri1.gridCreated, 'emit').and.callThrough();
+            spyOn(ri1.gridInitialized, 'emit').and.callThrough();
+            spyOn(ri3.gridCreated, 'emit').and.callThrough();
+            spyOn(ri3.gridInitialized, 'emit').and.callThrough();
+
+            UIInteractions.simulateClickAndSelectEvent(row.expander);
+            fixture.detectChanges();
+
+            // Verify parentRowData is undefined for grids with existing data
+            expect(ri1.gridCreated.emit).toHaveBeenCalledTimes(1);
+            expect(ri1.gridCreated.emit).toHaveBeenCalledWith(jasmine.objectContaining({ parentRowData: undefined }));
+            expect(ri1.gridInitialized.emit).toHaveBeenCalledTimes(1);
+            expect(ri1.gridInitialized.emit).toHaveBeenCalledWith(jasmine.objectContaining({ parentRowData: undefined }));
+
+            // Verify parentRowData is defined for grids without data
+            expect(ri3.gridCreated.emit).toHaveBeenCalledTimes(1);
+            expect(ri3.gridCreated.emit).toHaveBeenCalledWith(jasmine.objectContaining({ parentRowData: row.data }));
+            expect(ri3.gridInitialized.emit).toHaveBeenCalledTimes(1);
+            expect(ri3.gridInitialized.emit).toHaveBeenCalledWith(jasmine.objectContaining({ parentRowData: row.data }));
+        });
     });
 
     describe('IgxHierarchicalGrid Children Sizing #hGrid', () => {
@@ -1984,12 +2015,14 @@ export class IgxHierarchicalGridTestBaseComponent {
             <igx-column field="Col2"></igx-column>
             <igx-column field="Col3"></igx-column>
         </igx-row-island>
+        <igx-row-island [key]="'noData'" #rowIsland3></igx-row-island>
     </igx-hierarchical-grid>`,
     imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent]
 })
 export class IgxHierarchicalGridMultiLayoutComponent extends IgxHierarchicalGridTestBaseComponent {
     @ViewChild('rowIsland1', { read: IgxRowIslandComponent, static: true }) public rowIsland1: IgxRowIslandComponent;
     @ViewChild('rowIsland2', { read: IgxRowIslandComponent, static: true }) public override rowIsland2: IgxRowIslandComponent;
+    @ViewChild('rowIsland3', { read: IgxRowIslandComponent, static: true }) public rowIsland3: IgxRowIslandComponent;
     public height = '100px';
     public toggleColumns = true;
 }