Merge pull request #12167 from IgniteUI/dpetev/dynamic-column-group

Fix dynamic column-group child column

Author: kdinev

projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts

@@ -10,6 +10,7 @@ import {
     Output,
     EventEmitter
 } from '@angular/core';
+import { takeUntil } from 'rxjs/operators';
 
 import { IgxColumnComponent } from './column.component';
 import { flatten } from '../../core/utils';
@@ -298,6 +299,15 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
         if (this.collapsible) {
             this.setExpandCollapseState();
         }
+
+        this.children.changes
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((change: QueryList<IgxColumnComponent>) => {
+                change.forEach(x => x.parent = this);
+                if (this.collapsible) {
+                    this.setExpandCollapseState();
+                }
+            });
     }
 
     /**

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

@@ -28,7 +28,7 @@ const GRID_COL_GROUP_THEAD_GROUP_CLASS = 'igx-grid-thead__group';
 
 /* eslint-disable max-len */
 describe('IgxGrid - multi-column headers #grid', () => {
-    let fixture; let grid: IgxGridComponent; let componentInstance;
+    let fixture: ComponentFixture<any>; let grid: IgxGridComponent; let componentInstance;
 
     configureTestSuite();
 
@@ -135,6 +135,45 @@ describe('IgxGrid - multi-column headers #grid', () => {
 
         }));
 
+        it('Should render dynamic column group header correctly (#12165).', () => {
+            fixture = TestBed.createComponent(BlueWhaleGridComponent) as ComponentFixture<BlueWhaleGridComponent>;
+            (fixture as ComponentFixture<BlueWhaleGridComponent>).componentInstance.firstGroupRepeats = 1;
+            (fixture as ComponentFixture<BlueWhaleGridComponent>).componentInstance.secondGroupRepeats = 1;
+            fixture.detectChanges();
+
+            componentInstance = fixture.componentInstance;
+            grid = componentInstance.grid;
+            const columnWidthPx = parseInt(componentInstance.columnWidth, 10);
+            // 2 levels of column group and 1 level of columns
+            const gridHeadersDepth = 3;
+
+            let firstGroupChildrenCount = 1;
+
+            let firstGroup = GridFunctions.getColumnGroupHeaders(fixture)[0];
+            testColumnGroupHeaderRendering(firstGroup, firstGroupChildrenCount * columnWidthPx,
+                gridHeadersDepth * grid.defaultRowHeight, componentInstance.firstGroupTitle,
+                'firstGroupColumn', firstGroupChildrenCount);
+
+            let allHeaders = GridFunctions.getColumnHeaders(fixture).map<IgxGridHeaderComponent>(x => x.componentInstance);
+            let firstSixHeaders = allHeaders.slice(0, 6).map(x => x.column.field);
+            expect(allHeaders.length).toEqual(14);
+            expect(firstSixHeaders).toEqual(['ID', 'ID', 'ID', 'ID', 'CompanyName', 'ContactName']);
+
+            (componentInstance as BlueWhaleGridComponent).extraMissingColumn = true;
+            fixture.detectChanges();
+
+            firstGroupChildrenCount = 2;
+            firstGroup = GridFunctions.getColumnGroupHeaders(fixture)[0];
+            testColumnGroupHeaderRendering(firstGroup, firstGroupChildrenCount * columnWidthPx,
+                gridHeadersDepth * grid.defaultRowHeight, componentInstance.firstGroupTitle,
+                'firstGroupColumn', firstGroupChildrenCount);
+
+            allHeaders = GridFunctions.getColumnHeaders(fixture).map<IgxGridHeaderComponent>(x => x.componentInstance);
+            firstSixHeaders = allHeaders.slice(0, 6).map(x => x.column.field);
+            expect(allHeaders.length).toEqual(15);
+            expect(firstSixHeaders).toEqual(['ID', 'Missing', 'ID', 'ID', 'ID', 'CompanyName']);
+        });
+
         it('Should not render empty column group.', () => {
             fixture = TestBed.createComponent(ColumnGroupTestComponent);
             fixture.detectChanges();

projects/igniteui-angular/src/lib/test-utils/grid-mch-sample.spec.ts

@@ -464,6 +464,7 @@ export class StegosaurusGridComponent implements OnInit {
         <igx-grid #grid [data]="data" [height]="gridHeight" [columnWidth]="columnWidth">
             <igx-column-group headerGroupClasses="firstGroup" [header]="firstGroupTitle">
                 <igx-column headerClasses="firstGroupColumn" field="ID" *ngFor="let item of hunderdItems;"></igx-column>
+                <igx-column *ngIf="extraMissingColumn" headerClasses="firstGroupColumn" [field]='"Missing"'></igx-column>
             </igx-column-group>
             <igx-column-group headerGroupClasses="secondGroup" [header]="secondGroupTitle">
                 <igx-column-group headerGroupClasses="secondSubGroup" [header]="secondSubGroupTitle">
@@ -504,9 +505,16 @@ export class BlueWhaleGridComponent {
     public gridHeight = '500px';
     public columnWidth = '100px';
     public data = SampleTestData.contactInfoDataFull();
+    public extraMissingColumn = false;
+    public firstGroupRepeats = 100;
+    public secondGroupRepeats = 50;
 
-    public hunderdItems = new Array(100);
-    public fiftyItems = new Array(50);
+    public get hunderdItems() {
+        return new Array(this.firstGroupRepeats);
+    }
+    public get fiftyItems() {
+        return new Array(this.secondGroupRepeats);
+    }
 
     public firstGroupTitle = '100 IDs';
     public secondGroupTitle = '2 col groups with 50 IDs each';