Merge pull request #5647 from IgniteUI/mkirova/fix-5626

fix(igxHierarchicalGrid): Fix for dynamically added parent columns.

Author: mpavlinov

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

@@ -459,7 +459,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
 
     protected onColumnsChanged(change: QueryList<IgxColumnComponent>) {
         this.updateColumnList();
-        const cols = change.filter(c => c.grid === this);
+        const cols = change.filter(c => c.gridAPI.grid === this);
         if (cols.length > 0) {
             this.columnList.reset(cols);
             super.onColumnsChanged(this.columnList);

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

@@ -906,6 +906,30 @@ describe('IgxHierarchicalGrid Template Changing Scenarios', () => {
         expect(child2Headers[2].nativeElement.innerText).toEqual('Col1');
     });
 
+    it('should render correct columns when setting columns for parent and child post init using ngFor', () => {
+        const row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
+        UIInteractions.clickElement(row.expander);
+        fixture.detectChanges();
+
+        const child1Grids =  fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
+        const child1Grid = child1Grids[0].query(By.css('igx-hierarchical-grid')).componentInstance;
+
+        fixture.componentInstance.parentCols = ['Col1', 'Col2'];
+        fixture.componentInstance.islandCols1 = ['ID', 'ProductName', 'Col1'];
+        fixture.detectChanges();
+        // check parent cols
+        expect(hierarchicalGrid.columns.length).toBe(4);
+        expect(hierarchicalGrid.columns[0].field).toBe('ID');
+        expect(hierarchicalGrid.columns[1].field).toBe('ProductName');
+        expect(hierarchicalGrid.columns[2].field).toBe('Col1');
+        expect(hierarchicalGrid.columns[3].field).toBe('Col2');
+        // check child cols
+        expect(child1Grid.columns.length).toBe(3);
+        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', () => {
         const row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
         UIInteractions.clickElement(row.expander);
@@ -1210,6 +1234,7 @@ export class IgxHGridRemoteOnDemandComponent {
     <igx-hierarchical-grid #hierarchicalGrid [data]="data" [autoGenerate]="false" [height]="'500px'" [width]="'800px'" >
         <igx-column field="ID"></igx-column>
         <igx-column field="ProductName"></igx-column>
+        <igx-column *ngFor="let colField of parentCols" [field]="colField"></igx-column>
         <igx-row-island [key]="'childData'" [autoGenerate]="false" #rowIsland [height]="'350px'">
             <igx-column *ngFor="let colField of islandCols1" [field]="colField"></igx-column>
             <igx-row-island [key]="'childData'" [autoGenerate]="false" #rowIsland2 [height]="'200px'">
@@ -1221,6 +1246,7 @@ export class IgxHGridRemoteOnDemandComponent {
 export class IgxHierarchicalGridColumnsUpdateComponent extends IgxHierarchicalGridTestBaseComponent implements AfterViewInit {
     public cols1 = ['ID', 'ProductName', 'Col1', 'Col2', 'Col3'];
     public cols2 =  ['ID', 'ProductName', 'Col1'];
+    public parentCols = [];
     public islandCols1 = [];
     public islandCols2 = [];
     constructor(public cdr: ChangeDetectorRef) {

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

@@ -66,7 +66,7 @@ <h4 class="sample-title">Sample three</h4>
     <igx-hierarchical-grid [data]="localData" [autoGenerate]="true" [height]="'600px'" [width]="'800px'" #hGrid2>
 
             <igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelectable]='isRowSelectable'  [allowFiltering]='true'  >
-                <div *ngIf='riToggle'>
+            <div *ngIf='riToggle'>
                 <igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelectable]='isRowSelectable' [allowFiltering]='true'></igx-row-island>
             </div>
             </igx-row-island>
@@ -81,5 +81,20 @@ <h4 class="sample-title">Sample three</h4>
         </div> -->
     </igx-hierarchical-grid>
 
+    <h4 class="sample-title">Sample 4</h4>
+    <div class="sample-actions">
+        <button igxButton="raised" (click)='LoadMoreColumns()'>Change columns runtime</button>
+    </div>
+    <igx-hierarchical-grid [data]="localData" [autoGenerate]="false" [height]="'600px'" [width]="'800px'" #hGrid2>
+            <igx-column field="ID" [resizable]="true" [pinned]="true" [filterable]='true'></igx-column>
+            <igx-column field="ChildLevels" [resizable]="true" [groupable]='true'></igx-column>
+            <igx-column field="ProductName" hasSummary='true'></igx-column>
+            <igx-column *ngFor="let c of columns"  [field]="c"></igx-column>
+            <igx-row-island [key]="'childData'" [autoGenerate]="false" [rowSelectable]='isRowSelectable'  [allowFiltering]='true'>
+                    <igx-column field="ID" [hasSummary]='true' [dataType]="'number'"></igx-column>
+                    <igx-column *ngFor="let c of childColumns"  [field]="c"></igx-column>
+            </igx-row-island>
+    </igx-hierarchical-grid>
+
 
 </div>

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

@@ -15,6 +15,10 @@ export class HierarchicalGridSampleComponent {
     displayDensities;
     riToggle = true;
 
+
+    public columns;
+    public childColumns;
+
     @ViewChild('layout1')
     layout1: IgxRowIslandComponent;
 
@@ -96,4 +100,9 @@ export class HierarchicalGridSampleComponent {
     selectDensity(event) {
         this.density = this.displayDensities[event.index].label;
     }
+
+    public LoadMoreColumns() {
+        this.columns = ['Col1', 'Col2', 'Col3'];
+        this.childColumns = ['ChildCol1', 'ChildCol2'];
+    }
 }