fix(igxHierarchicalGrid): Fix issue when dynamically adding row islands and columns.

Author: MKirova

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

@@ -1108,8 +1108,8 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
         const nestedColumns = childLayouts.map((layout) => layout.columnList.toArray());
         const colsArray = [].concat.apply([], nestedColumns);
         const colLength = this.columnList.length;
-        if (colsArray.length > 0) {
-            const topCols = this.columnList.filter((item) => colsArray.indexOf(item) === -1);
+        const topCols = this.columnList.filter((item) => colsArray.indexOf(item) === -1);
+        if (topCols.length > 0) {
             this.updateColumns(topCols);
             if (recalcColSizes && this.columns.length !== colLength) {
                 this.calculateGridSizes(false);

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

@@ -140,12 +140,17 @@ <h4 class="sample-title">Sample two</h4>
     <h4 class="sample-title">Sample three (batch editing)</h4>
     <div class="sample-actions">
         <button igxButton="raised" (click)='riToggle = !riToggle'>Change row islands runtime</button>
+        <button igxButton="raised" (click)="columnsReady = !columnsReady">Toggle columns</button>
+        <button igxButton="raised" (click)="layoutsReady = !layoutsReady">Toggle child layouts</button>
     </div>
     <igx-hierarchical-grid [batchEditing]="true"
-    [rowEditable]="true" [primaryKey]="'ID'"  [data]="localData" [autoGenerate]="true" [height]="'600px'" [width]="'800px'" #hGrid2>
-
-        <igx-row-island [key]="'childData'" [primaryKey]="'ID'" [autoGenerate]="true" [rowSelection]='selectionMode' [batchEditing]="true" [rowEditable]="true"
+    [rowEditable]="true" [primaryKey]="'ID'"  [data]="localData" [height]="'600px'" [width]="'800px'" #hGrid2>
+        <igx-column *ngIf="columnsReady" field="ID"></igx-column>
+        <igx-column *ngIf="columnsReady" field="ProductName"></igx-column>
+        <igx-row-island *ngIf="layoutsReady" [key]="'childData'" [primaryKey]="'ID'" [rowSelection]='selectionMode' [batchEditing]="true" [rowEditable]="true"
             [allowFiltering]="true">
+            <igx-column field="ID"></igx-column>
+            <igx-column field="ChildLevels"></igx-column>
             <div *ngIf='riToggle'>
                 <igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelection]='selectionMode' [batchEditing]="true" [rowEditable]="true"
                     [allowFiltering]="true"></igx-row-island>

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

@@ -14,12 +14,13 @@ import {
     templateUrl: 'hierarchical-grid.sample.html'
 })
 export class HierarchicalGridSampleComponent implements AfterViewInit {
+    public columnsReady = false;
+    public layoutsReady = false;
     @ViewChild('layout1', { static: true })
     private layout1: IgxRowIslandComponent;
 
     @ViewChild('hGrid2', { static: true })
     private hGrid2: IgxHierarchicalGridComponent;
-
     public localData = [];
     public localData1 = [];
     public data1 = [];