Skip to content

Commit

Permalink
fix(column-groups): add logic for collapsible and expanded (#13931)
Browse files Browse the repository at this point in the history
  • Loading branch information
@valeriatoneva
valeriatoneva authored Feb 20, 2024
1 parent e9f8391 commit 240c006
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 7 deletions.
2 changes: 1 addition & 1 deletion projects/igniteui-angular/src/lib/grids/columns/column.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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?.();
}
}

Expand Down
50 changes: 49 additions & 1 deletion projects/igniteui-angular/src/lib/grids/state.directive.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -866,5 +893,26 @@ export class IgxGridStateWithDetailsComponent {

public data = SampleTestData.foodProductData();
}

@Component({
template: `
<igx-grid #grid [data]="data" igxGridState height="500px" width="1300px" columnWidth="100px">
<igx-column field="ID"></igx-column>
<igx-column-group header="Address Information" [collapsible]="true">
<igx-column field="City" [visibleWhenCollapsed]="true"></igx-column>
<igx-column field="Address" [visibleWhenCollapsed]="false"></igx-column>
</igx-column-group>
</igx-grid>
`,
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 */

8 changes: 7 additions & 1 deletion projects/igniteui-angular/src/lib/grids/state.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,9 @@ export interface IColumnState {
parent: any;
disableHiding: boolean;
disablePinning: boolean;
collapsible?: boolean;
expanded?: boolean;
visibleWhenCollapsed?: boolean;
}

export type GridFeatures = keyof IGridStateOptions;
Expand Down Expand Up @@ -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 };
},
Expand Down
8 changes: 4 additions & 4 deletions src/app/grid-state/grid-state.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,10 @@
<igx-column [resizable]="true" field="EmployeeID" [filterable]="false"></igx-column>
<igx-column-group [pinned]="false" header="Employee">
<igx-column [sortable]="true" [resizable]="true" field="Country"></igx-column>
<igx-column-group header="Employee Names">
<igx-column-group header="Employee Names" [collapsible]="true">
<igx-column [pinned]="false" [sortable]="true" [resizable]="true"
field="FirstName"></igx-column>
<igx-column [sortable]="true" [resizable]="true" field="LastName"></igx-column>
field="FirstName" [visibleWhenCollapsed]="true"></igx-column>
<igx-column [sortable]="true" [resizable]="true" field="LastName" [visibleWhenCollapsed]="false"></igx-column>
</igx-column-group>
</igx-column-group>
<igx-column-group header="Additional Information">
Expand Down Expand Up @@ -243,4 +243,4 @@

<ng-template igxCell #activeTemplate let-column let-cell="cell">
Hi I'm {{ cell.value }}
</ng-template>
</ng-template>

0 comments on commit 240c006

Please sign in to comment.