Skip to content

Commit 7b6c997

Browse files
zdrawkuzdrawku
authored
Merge pull request #10097 from IgniteUI/dTsvetkov/feat-8516-master
feat(state-persistance): restore column group headers #8516 - master
2 parents c87093f + 5f741c2 commit 7b6c997

8 files changed

+107
-39
lines changed

‎CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22

33
All notable changes for each version of this project will be documented in this file.
44

5+
## 12.1.6
6+
7+
### New Features
8+
- `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
9+
- Added capability to restore the state of multi column headers with `IgxGridStateDirective`.
10+
511
## 12.1.3
612

713
### New Features

‎projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -667,7 +667,7 @@ describe('IgxGrid - Cell selection #grid', () => {
667667
} finally {
668668
fix.detectChanges();
669669
}
670-
expect(errorMessage).toEqual('Cannot read property \'visibleIndex\' of undefined');
670+
expect(errorMessage).toContain('visibleIndex');
671671
expect(selectionChangeSpy).toHaveBeenCalledTimes(0);
672672
expect(grid.getSelectedData()).toEqual([]);
673673
expect(grid.getSelectedRanges()).toEqual([]);
@@ -699,7 +699,7 @@ describe('IgxGrid - Cell selection #grid', () => {
699699
} finally {
700700
fix.detectChanges();
701701
}
702-
expect(errorMessage).toEqual('Cannot read property \'visibleIndex\' of undefined');
702+
expect(errorMessage).toContain('visibleIndex');
703703
GridSelectionFunctions.verifySelectedRange(grid, 1, 2, 0, 1);
704704
expect(selectionChangeSpy).toHaveBeenCalledTimes(0);
705705
expect(grid.getSelectedData()).toEqual(expectedData);
@@ -718,7 +718,7 @@ describe('IgxGrid - Cell selection #grid', () => {
718718
} finally {
719719
fix.detectChanges();
720720
}
721-
expect(errorMessage).toEqual('Cannot read property \'visibleIndex\' of undefined');
721+
expect(errorMessage).toContain('visibleIndex');
722722
expect(selectionChangeSpy).toHaveBeenCalledTimes(0);
723723
expect(grid.getSelectedData()).toEqual([]);
724724
expect(grid.getSelectedRanges()).toEqual([]);

‎projects/igniteui-angular/src/lib/grids/state.directive.spec.ts

+5-5
Large diffs are not rendered by default.

‎projects/igniteui-angular/src/lib/grids/state.directive.ts

+52-25
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { ISortingExpression } from '../data-operations/sorting-expression.interf
33
import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
44
import { IFilteringExpression } from '../data-operations/filtering-expression.interface';
55
import { IgxColumnComponent } from './columns/column.component';
6+
import { IgxColumnGroupComponent } from './columns/column-group.component';
67
import { IGroupingExpression } from '../data-operations/grouping-expression.interface';
78
import { IPagingState } from '../data-operations/paging-state.interface';
89
import { GridColumnDataType } from '../data-operations/data-util';
@@ -76,6 +77,8 @@ export interface IColumnState {
7677
header: string;
7778
resizable: boolean;
7879
searchable: boolean;
80+
columnGroup: boolean;
81+
parent: any;
7982
}
8083

8184
export type GridFeatures = keyof IGridStateOptions;
@@ -162,37 +165,61 @@ export class IgxGridStateDirective {
162165
columns: {
163166
getFeatureState: (context: IgxGridStateDirective): IGridState => {
164167
const gridColumns: IColumnState[] = context.currGrid.columns.map((c) => ({
165-
pinned: c.pinned,
166-
sortable: c.sortable,
167-
filterable: c.filterable,
168-
editable: c.editable,
169-
sortingIgnoreCase: c.sortingIgnoreCase,
170-
filteringIgnoreCase: c.filteringIgnoreCase,
171-
headerClasses: c.headerClasses,
172-
headerGroupClasses: c.headerGroupClasses,
173-
maxWidth: c.maxWidth,
174-
groupable: c.groupable,
175-
movable: c.movable,
176-
hidden: c.hidden,
177-
dataType: c.dataType,
178-
hasSummary: c.hasSummary,
179-
field: c.field,
180-
width: c.width,
181-
header: c.header,
182-
resizable: c.resizable,
183-
searchable: c.searchable,
184-
selectable: c.selectable
185-
}));
168+
pinned: c.pinned,
169+
sortable: c.sortable,
170+
filterable: c.filterable,
171+
editable: c.editable,
172+
sortingIgnoreCase: c.sortingIgnoreCase,
173+
filteringIgnoreCase: c.filteringIgnoreCase,
174+
headerClasses: c.headerClasses,
175+
headerGroupClasses: c.headerGroupClasses,
176+
maxWidth: c.maxWidth,
177+
groupable: c.groupable,
178+
movable: c.movable,
179+
hidden: c.hidden,
180+
dataType: c.dataType,
181+
hasSummary: c.hasSummary,
182+
field: c.field,
183+
width: c.width,
184+
header: c.header,
185+
resizable: c.resizable,
186+
searchable: c.searchable,
187+
selectable: c.selectable,
188+
parent: c.parent ? c.parent.header : null,
189+
columnGroup: c.columnGroup
190+
}));
186191
return { columns: gridColumns };
187192
},
188193
restoreFeatureState: (context: IgxGridStateDirective, state: IColumnState[]): void => {
189194
const newColumns = [];
190195
const factory = context.resolver.resolveComponentFactory(IgxColumnComponent);
196+
const groupFactory = context.resolver.resolveComponentFactory(IgxColumnGroupComponent);
191197
state.forEach((colState) => {
192-
const ref = factory.create(context.viewRef.injector);
193-
Object.assign(ref.instance, colState);
194-
ref.changeDetectorRef.detectChanges();
195-
newColumns.push(ref.instance);
198+
const hasColumnGroup = colState.columnGroup;
199+
delete colState.columnGroup;
200+
if (hasColumnGroup) {
201+
const ref1 = groupFactory.create(context.viewRef.injector);
202+
Object.assign(ref1.instance, colState);
203+
if (ref1.instance.parent) {
204+
const columnGroup: IgxColumnGroupComponent = newColumns.find(e => e.header === ref1.instance.parent);
205+
columnGroup.children.reset([...columnGroup.children.toArray(), ref1.instance]);
206+
ref1.instance.parent = columnGroup;
207+
}
208+
ref1.changeDetectorRef.detectChanges();
209+
newColumns.push(ref1.instance);
210+
} else {
211+
const ref = factory.create(context.viewRef.injector);
212+
Object.assign(ref.instance, colState);
213+
if (ref.instance.parent) {
214+
const columnGroup: IgxColumnGroupComponent = newColumns.find(e => e.header === ref.instance.parent);
215+
if (columnGroup) {
216+
ref.instance.parent = columnGroup;
217+
columnGroup.children.reset([...columnGroup.children.toArray(), ref.instance]);
218+
}
219+
}
220+
ref.changeDetectorRef.detectChanges();
221+
newColumns.push(ref.instance);
222+
}
196223
});
197224
context.currGrid.columnList.reset(newColumns);
198225
context.currGrid.columnList.notifyOnChanges();

‎projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts

+3-3
Large diffs are not rendered by default.

‎projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ describe('IgxTreeGridState - input properties #tGrid', () => {
7878

7979
it('getState should return corect JSON string', () => {
8080
// eslint-disable-next-line max-len
81-
const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":18,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}';
81+
const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":18,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}';
8282
fix.detectChanges();
8383

8484
const state = fix.componentInstance.state;
@@ -164,8 +164,8 @@ describe('IgxTreeGridState - input properties #tGrid', () => {
164164
fix.detectChanges();
165165
const state = fix.componentInstance.state;
166166
/* eslint-disable max-len */
167-
const initialColumnsState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true}]}';
168-
const newColumnsState = '{"columns":[{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true},{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true}]}';
167+
const initialColumnsState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false}]}';
168+
const newColumnsState = '{"columns":[{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false},{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false}]}';
169169
/* eslint-enable max-len */
170170
const columns = JSON.parse(newColumnsState).columns;
171171

0 commit comments

Comments
 (0)