diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts index 7db48e8cc99..ca3343e3fa6 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -1540,7 +1540,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy this._visibleWhenCollapsed = value; this.visibleWhenCollapsedChange.emit(this._visibleWhenCollapsed); if (this.parent) { - this.parent.setExpandCollapseState(); + this.parent?.setExpandCollapseState?.(); } } diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts index b8a37d899bb..e71bb32a600 100644 --- a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts @@ -18,7 +18,7 @@ import { GridSelectionRange } from './common/types'; import { CustomFilter } from '../test-utils/grid-samples.spec'; import { IgxPaginatorComponent } from '../paginator/paginator.component'; import { NgFor } from '@angular/common'; -import { IgxColumnComponent, IgxGridDetailTemplateDirective } from './public_api'; +import { IgxColumnComponent, IgxColumnGroupComponent, IgxGridDetailTemplateDirective } from './public_api'; /* eslint-disable max-len */ describe('IgxGridState - input properties #grid', () => { @@ -416,6 +416,33 @@ describe('IgxGridState - input properties #grid', () => { HelperFunctions.verifyColumns(columnsStateObject.columns, gridState); }); + it('setState should correctly restore grid columns state properties: collapsible and expanded', () => { + const fix = TestBed.createComponent(CollapsibleColumnGroupTestComponent); + fix.detectChanges(); + const state = fix.componentInstance.state; + const grid = fix.componentInstance.grid; + /* eslint-disable max-len */ + const initialState = '{"columns":[{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ID","width":"100px","header":"","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false,"disablePinning":false},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"width":"100px","header":"Address Information","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":true,"disableHiding":false,"disablePinning":false,"collapsible":true,"expanded":true},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":true,"dataType":"string","hasSummary":false,"field":"City","width":"100px","header":"","resizable":false,"searchable":true,"selectable":true,"parent":"Address Information","columnGroup":false,"disableHiding":false,"disablePinning":false,"visibleWhenCollapsed":true},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"Address","width":"100px","header":"","resizable":false,"searchable":true,"selectable":true,"parent":"Address Information","columnGroup":false,"disableHiding":false,"disablePinning":false,"visibleWhenCollapsed":false}]}' + const newState = `{"columns":[{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ID","width":"100px","header":"","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false,"disablePinning":false},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"width":"100px","header":"Address Information","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":true,"disableHiding":false,"disablePinning":false,"collapsible":true,"expanded":false},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":true,"dataType":"string","hasSummary":false,"field":"City","width":"100px","header":"","resizable":false,"searchable":true,"selectable":true,"parent":"Address Information","columnGroup":false,"disableHiding":false,"disablePinning":false,"visibleWhenCollapsed":true},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"Address","width":"100px","header":"","resizable":false,"searchable":true,"selectable":true,"parent":"Address Information","columnGroup":false,"disableHiding":false,"disablePinning":false,"visibleWhenCollapsed":false}]}` + /* eslint-enable max-len */ + const columnsStateObject = JSON.parse(newState); + let gridState = state.getState(true, 'columns'); + expect(gridState).toBe(initialState); + // 1. initial state collapsible:true, expanded: true; + // 2. new state collapsible:true, expanded: false after restoration + + state.setState(columnsStateObject); // set new state - resored state + gridState = state.getState(false, 'columns') as IGridState; + HelperFunctions.verifyColumns(columnsStateObject.columns, gridState); + gridState = state.getState(true, 'columns'); + fix.detectChanges(); + expect(gridState).toBe(newState); + + const addressInfoGroup = grid.columns.find(c => c.header === "Address Information"); + expect(addressInfoGroup.collapsible).toBe(true); + expect(addressInfoGroup.expanded).toBe(false); + }); + it('setState should correctly restore grid paging state from string', () => { const fix = TestBed.createComponent(IgxGridStateComponent); fix.detectChanges(); @@ -866,5 +893,26 @@ export class IgxGridStateWithDetailsComponent { public data = SampleTestData.foodProductData(); } + +@Component({ + template: ` + + + + + + + + `, + standalone: true, + imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxGridStateDirective, NgFor] +}) +export class CollapsibleColumnGroupTestComponent { + @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) + public grid: IgxGridComponent; + @ViewChild(IgxGridStateDirective, { static: true }) + public state: IgxGridStateDirective; + public data = SampleTestData.contactInfoDataFull(); +} /* eslint-enable max-len */ diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.ts b/projects/igniteui-angular/src/lib/grids/state.directive.ts index a5c1231581f..9b2601ffad0 100644 --- a/projects/igniteui-angular/src/lib/grids/state.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/state.directive.ts @@ -90,6 +90,9 @@ export interface IColumnState { parent: any; disableHiding: boolean; disablePinning: boolean; + collapsible?: boolean; + expanded?: boolean; + visibleWhenCollapsed?: boolean; } export type GridFeatures = keyof IGridStateOptions; @@ -202,7 +205,10 @@ export class IgxGridStateDirective { parent: c.parent ? c.parent.header : null, columnGroup: c.columnGroup, disableHiding: c.disableHiding, - disablePinning: c.disablePinning + disablePinning: c.disablePinning, + collapsible: c.columnGroup ? c.collapsible : undefined, + expanded: c.columnGroup ? c.expanded : undefined, + visibleWhenCollapsed: c.parent?.columnGroup ? (c as IgxColumnComponent).visibleWhenCollapsed : undefined })); return { columns: gridColumns }; }, diff --git a/src/app/grid-state/grid-state.component.html b/src/app/grid-state/grid-state.component.html index 631adc9c7a4..d6e1048680d 100644 --- a/src/app/grid-state/grid-state.component.html +++ b/src/app/grid-state/grid-state.component.html @@ -58,10 +58,10 @@ - + - + field="FirstName" [visibleWhenCollapsed]="true"> + @@ -243,4 +243,4 @@ Hi I'm {{ cell.value }} - \ No newline at end of file +