chore(*): Move child grid column initialization on grid ContentInit.

Author: MKirova

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

@@ -161,9 +161,6 @@ private resolver;
      */
     ngAfterViewInit() {
         this.hGrid.childLayoutList = this.layout.children;
-        if (this.layout.childColumns.length > 0 && !this.hGrid.autoGenerate) {
-            this.hGrid.createColumnsList(this.layout.childColumns.toArray());
-        }
         const layouts = this.hGrid.childLayoutList.toArray();
         layouts.forEach((l) => this.hGrid.hgridAPI.registerChildRowIsland(l));
         this.parentGrid.hgridAPI.registerChildGrid(this.rowData.rowID, this.layout.key, this.hGrid);

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

@@ -414,6 +414,14 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
         }
     }
 
+
+    protected setupColumns() {
+        if (this.parentIsland && this.parentIsland.childColumns.length > 0 && !this.autoGenerate) {
+            this.createColumnsList(this.parentIsland.childColumns.toArray());
+        }
+        super.setupColumns();
+    }
+
     protected onColumnsChanged(change: QueryList<IgxColumnComponent>) {
         Promise.resolve().then(() => {
             this.updateColumnList();

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

@@ -988,7 +988,7 @@ describe('IgxHierarchicalGrid Template Changing Scenarios #hGrid', () => {
         expect(child2Headers[2].nativeElement.innerText).toEqual('Col1');
     });
 
-    it('should render correct columns when setting columns for parent and child post init using ngFor', () => {
+    it('should render correct columns when setting columns for parent and child post init using ngFor', fakeAsync(() => {
         const row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
         UIInteractions.simulateClickAndSelectEvent(row.expander);
         fixture.detectChanges();
@@ -999,6 +999,8 @@ describe('IgxHierarchicalGrid Template Changing Scenarios #hGrid', () => {
         fixture.componentInstance.parentCols = ['Col1', 'Col2'];
         fixture.componentInstance.islandCols1 = ['ID', 'ProductName', 'Col1'];
         fixture.detectChanges();
+        tick();
+        fixture.detectChanges();
         // check parent cols
         expect(hierarchicalGrid.columns.length).toBe(4);
         expect(hierarchicalGrid.columns[0].field).toBe('ID');
@@ -1010,9 +1012,9 @@ describe('IgxHierarchicalGrid Template Changing Scenarios #hGrid', () => {
         expect(hierarchicalGrid.columns[0].field).toBe('ID');
         expect(hierarchicalGrid.columns[1].field).toBe('ProductName');
         expect(hierarchicalGrid.columns[2].field).toBe('Col1');
-    });
+    }));
 
-    it('should update columns for expanded child when adding column to row island', () => {
+    it('should update columns for expanded child when adding column to row island', fakeAsync(() => {
         const row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
         UIInteractions.simulateClickAndSelectEvent(row.expander);
         fixture.detectChanges();
@@ -1035,6 +1037,8 @@ describe('IgxHierarchicalGrid Template Changing Scenarios #hGrid', () => {
 
         fixture.componentInstance.islandCols2.push('Col2');
         fixture.detectChanges();
+        tick();
+        fixture.detectChanges();
 
         child2Headers = child2Grid.queryAll(By.css('igx-grid-header'));
         expect(child2Headers.length).toEqual(4);
@@ -1056,9 +1060,9 @@ describe('IgxHierarchicalGrid Template Changing Scenarios #hGrid', () => {
         expect(colHeaders.length).toEqual(2);
         expect(colHeaders[0].nativeElement.innerText).toEqual('ID');
         expect(colHeaders[1].nativeElement.innerText).toEqual('ProductName');
-    });
+    }));
 
-    it('should update columns for rendered child that is collapsed when adding column to row island', () => {
+    it('should update columns for rendered child that is collapsed when adding column to row island', fakeAsync(() => {
         const row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
         UIInteractions.simulateClickAndSelectEvent(row.expander);
         fixture.detectChanges();
@@ -1084,6 +1088,8 @@ describe('IgxHierarchicalGrid Template Changing Scenarios #hGrid', () => {
 
         fixture.componentInstance.islandCols2.push('Col2');
         fixture.detectChanges();
+        tick();
+        fixture.detectChanges();
 
         UIInteractions.simulateClickAndSelectEvent(row1.expander);
         fixture.detectChanges();
@@ -1094,7 +1100,7 @@ describe('IgxHierarchicalGrid Template Changing Scenarios #hGrid', () => {
         expect(child2Headers[1].nativeElement.innerText).toEqual('ProductName');
         expect(child2Headers[2].nativeElement.innerText).toEqual('Col1');
         expect(child2Headers[3].nativeElement.innerText).toEqual('Col2');
-    });
+    }));
 });
 
 describe('IgxHierarchicalGrid Runtime Row Island change Scenarios #hGrid', () => {
@@ -1117,8 +1123,8 @@ describe('IgxHierarchicalGrid Runtime Row Island change Scenarios #hGrid', () =>
         hierarchicalGrid = fixture.componentInstance.hgrid;
     }));
 
-    it('should allow changing row islands runtime in root grid.', () => {
-        const row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
+    it('should allow changing row islands runtime in root grid.', fakeAsync(() => {
+        let row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
         UIInteractions.simulateClickAndSelectEvent(row.expander);
         fixture.detectChanges();
 
@@ -1130,6 +1136,8 @@ describe('IgxHierarchicalGrid Runtime Row Island change Scenarios #hGrid', () =>
 
         fixture.componentInstance.toggleRI = false;
         fixture.detectChanges();
+        tick();
+        fixture.detectChanges();
 
         hGrids = fixture.debugElement.queryAll(By.css('igx-hierarchical-grid'));
         childGrids = hierarchicalGrid.hgridAPI.getChildGrids();
@@ -1139,13 +1147,16 @@ describe('IgxHierarchicalGrid Runtime Row Island change Scenarios #hGrid', () =>
 
         fixture.componentInstance.toggleRI = true;
         fixture.detectChanges();
+        tick();
+        fixture.detectChanges();
 
         hGrids = fixture.debugElement.queryAll(By.css('igx-hierarchical-grid'));
         childGrids = hierarchicalGrid.hgridAPI.getChildGrids();
+        row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
         expect(childGrids.length).toBe(1);
         expect(hGrids.length).toBe(2);
         expect(row.expander).not.toBe(undefined);
-    });
+    }));
 
     it('should allow changing row islands runtime in child grid.', () => {
         const row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;