fix(column-groups): add logic for collapsible and expanded (#13931)

Author: valeriatoneva

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?.();
         }
     }
 

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: `
+    <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 */
 

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 };
             },

src/app/grid-state/grid-state.component.html

@@ -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">
@@ -243,4 +243,4 @@
 
 <ng-template igxCell #activeTemplate let-column let-cell="cell">
     Hi I'm {{ cell.value }}
-  </ng-template>
+  </ng-template>