Merge pull request #12369 from IgniteUI/mkirova/fix-12251

fix(igxHierarchicalGrid): Fix issue when dynamically adding row islan…

Author: dkamburov

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);

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

@@ -31,7 +31,8 @@ describe('Basic IgxHierarchicalGrid', () => {
                 IgxHierarchicalGridCustomRowEditOverlayComponent,
                 IgxHierarchicalGridAutoSizeColumnsComponent,
                 IgxHierarchicalGridCustomTemplateComponent,
-                IgxHierarchicalGridCustomFilteringTemplateComponent
+                IgxHierarchicalGridCustomFilteringTemplateComponent,
+                IgxHierarchicalGridToggleRIAndColsComponent
             ],
             imports: [NoopAnimationsModule, IgxHierarchicalGridModule]
         }).compileComponents();
@@ -1623,6 +1624,27 @@ describe('Basic IgxHierarchicalGrid', () => {
 
     });
 
+    describe('Columns and row islands runtime change', () => {
+        let fixture: ComponentFixture<IgxHierarchicalGridToggleRIAndColsComponent>;
+        let hierarchicalGrid: IgxHierarchicalGridComponent;
+        it('should allow changing columns runtime in root grid when there are no row islands.', fakeAsync(() => {
+            fixture = TestBed.createComponent(IgxHierarchicalGridToggleRIAndColsComponent);
+            fixture.detectChanges();
+            hierarchicalGrid = fixture.componentInstance.hgrid;
+            expect(hierarchicalGrid.childLayoutList.length).toBe(0);
+            expect(hierarchicalGrid.columns.length).toBe(0);
+            fixture.componentInstance.toggleColumns = true;
+            fixture.detectChanges();
+            tick();
+            fixture.detectChanges();
+            expect(hierarchicalGrid.columns.length).toBe(2);
+
+            fixture.componentInstance.toggleRI = true;
+            fixture.detectChanges();
+            expect(hierarchicalGrid.childLayoutList.length).toBe(1);
+        }));
+    });
+
     describe('IgxHierarchicalGrid custom template #hGrid', () => {
 
         it('should allow setting custom template for expand/collapse icons', async () => {
@@ -1915,7 +1937,21 @@ export class IgxHierarchicalGridSizingComponent {
 export class IgxHierarchicalGridToggleRIComponent  extends IgxHierarchicalGridTestBaseComponent {
 public toggleRI = true;
 public toggleChildRI = true;
+}
 
+@Component({
+    template: `
+    <igx-hierarchical-grid #hierarchicalGrid [data]="data"
+     [autoGenerate]="false" [height]="'400px'" [width]="'500px'">
+     <igx-column field="ID" *ngIf='toggleColumns'></igx-column>
+     <igx-column field="ProductName" *ngIf='toggleColumns'></igx-column>
+     <igx-row-island *ngIf='toggleRI' [key]="'childData'" [autoGenerate]="true">
+     </igx-row-island>
+    </igx-hierarchical-grid>`
+})
+export class IgxHierarchicalGridToggleRIAndColsComponent  extends IgxHierarchicalGridToggleRIComponent {
+    public toggleRI = false;
+    public toggleColumns = false;
 }
 
 @Component({

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 = [];