Merge pull request #14746 from IgniteUI/bpachilova/fix-col-group-hidden-initially-17.2.x

fix(igx-grid): hide igx-column-group when hidden=true is set in the template initially - 17.2.x

Author: kacheshmarova

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

@@ -285,6 +285,9 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
             if (this.pinned) {
                 child.pinned = this.pinned;
             }
+            if (this._hidden) {
+                child.hidden = this._hidden;
+            }
         });
         if (this.collapsible) {
             this.setExpandCollapseState();

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

@@ -18,7 +18,8 @@ import { OneGroupOneColGridComponent, OneGroupThreeColsGridComponent,
     NestedColGroupsGridComponent, StegosaurusGridComponent,
     OneColPerGroupGridComponent, NestedColumnGroupsGridComponent,
     DynamicGridComponent, NestedColGroupsWithTemplatesGridComponent,
-    DynamicColGroupsGridComponent } from '../../test-utils/grid-mch-sample.spec';
+    DynamicColGroupsGridComponent,
+    ColumnGroupHiddenInTemplateComponent} from '../../test-utils/grid-mch-sample.spec';
 import { CellType } from '../common/grid.interface';
 
 const GRID_COL_THEAD_TITLE_CLASS = 'igx-grid-th__title';
@@ -47,7 +48,8 @@ describe('IgxGrid - multi-column headers #grid', () => {
                 NestedColumnGroupsGridComponent,
                 DynamicGridComponent,
                 NestedColGroupsWithTemplatesGridComponent,
-                DynamicColGroupsGridComponent
+                DynamicColGroupsGridComponent,
+                ColumnGroupHiddenInTemplateComponent
             ]
         })
         .compileComponents();
@@ -392,6 +394,20 @@ describe('IgxGrid - multi-column headers #grid', () => {
             expect(generalHeader.nativeElement.firstElementChild.title).toBe('General Information Title');
             expect(addressHeader.nativeElement.firstElementChild.title).toBe('Address Information');
         });
+
+        it('should hide column group when hidden property is set to true in the template - parent and child level', () => {
+            fixture = TestBed.createComponent(ColumnGroupHiddenInTemplateComponent);
+            fixture.detectChanges();
+
+            grid = fixture.componentInstance.grid;
+            const generalGroup = grid.columnList.find(c => c.header === 'General Information');
+            const locationGroup = grid.columnList.find(c => c.header === 'Location');
+            expect(generalGroup.hidden).toBe(true);
+            expect(locationGroup.hidden).toBe(true);
+
+            expect(GridFunctions.getColumnHeaders(fixture).length).toEqual(6);
+            expect(GridFunctions.getColumnGroupHeaders(fixture).length).toEqual(2);
+        });
     });
 
     describe('Columns widths tests (1 group 1 column) ', () => {

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

@@ -660,3 +660,36 @@ export class NestedColGroupsWithTemplatesGridComponent {
 
     public data = SampleTestData.contactInfoDataFull();
 }
+
+@Component({
+    template: `
+    <igx-grid #grid [data]="data" height="500px" >
+        <igx-column field="ID"></igx-column>
+        <igx-column-group header="General Information" [hidden]="true">
+            <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="CompanyName"></igx-column>
+            <igx-column-group header="Person Details">
+                <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="ContactName"></igx-column>
+                <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="ContactTitle"></igx-column>
+            </igx-column-group>
+        </igx-column-group>
+        <igx-column-group header="Address Information">
+            <igx-column-group header="Location" [hidden]="true">
+                <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="Country"></igx-column>
+                <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="Region"></igx-column>
+            </igx-column-group>
+                <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="City"></igx-column>
+                <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="Address"></igx-column>
+            <igx-column-group header="Contact Information">
+                <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="Phone"></igx-column>
+                <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="Fax"></igx-column>
+                <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="PostalCode"></igx-column>
+            </igx-column-group>
+        </igx-column-group>
+        <igx-column-group #emptyColGroup header="Empty Header">
+        </igx-column-group>
+    </igx-grid>
+    `,
+    standalone: true,
+    imports: [IgxGridComponent, IgxColumnGroupComponent, IgxColumnComponent]
+})
+export class ColumnGroupHiddenInTemplateComponent extends ColumnGroupTestComponent { }