From 563d7d32631a99f942a10d4301ecaa37dbd7226c Mon Sep 17 00:00:00 2001 From: ddaribo Date: Wed, 11 Sep 2024 14:17:09 +0300 Subject: [PATCH 1/2] test(column-group): hidden property set in the template --- .../src/lib/grids/grid/column-group.spec.ts | 20 +++++++++-- .../lib/test-utils/grid-mch-sample.spec.ts | 33 +++++++++++++++++++ 2 files changed, 51 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts index ecbd572d1fc..a3e58d7f35d 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts +++ b/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) ', () => { diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-mch-sample.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-mch-sample.spec.ts index 4d6a5689a4c..47e14600de4 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-mch-sample.spec.ts +++ b/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: ` + + + + + + + + + + + + + + + + + + + + + + + + + + `, + standalone: true, + imports: [IgxGridComponent, IgxColumnGroupComponent, IgxColumnComponent] +}) +export class ColumnGroupHiddenInTemplateComponent extends ColumnGroupTestComponent { } From a84976d7bdbc9508f2f813d3103896125250c423 Mon Sep 17 00:00:00 2001 From: ddaribo Date: Wed, 11 Sep 2024 14:26:24 +0300 Subject: [PATCH 2/2] fix(column-group): hide children if parent is hidden initially --- .../src/lib/grids/columns/column-group.component.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts index 1a7924171ef..a948ca65484 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts +++ b/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();