How to Collapse or Expand All Grouped Columns in Angular

Background

FlexGrid uses <wj-flex-grid> and nested <wj-flex-grid-column-group> components to define grouped columns. Set collapseTo to choose which child column stays visible when a group is collapsed; set isCollapsed to control the group’s state.

Steps to Complete

1. Define the column groups.
2. Add Collapse and Expand buttons.
3. Set the state of every group.

Getting Started

Import Wijmo’s Angular grid components and CSS. For an NgModule-based app, add WjGridModule to the module’s imports.

import { WjGridModule } from "@mescius/wijmo.angular2.grid";
import "@mescius/wijmo.styles/wijmo.css";

// Add WjGridModule to your NgModule's imports.

• Make sure the component provides a data source with fields matching the column bindings, such as name, perf.ytd, and alloc.amount.

Define the column groups

Add the grouped columns inside the FlexGrid in your component template.

<wj-flex-grid
  #flex
  [itemsSource]="data"
  [autoGenerateColumns]="false"
>
  <wj-flex-grid-column-group
    [binding]="'name'"
    [header]="'Name'">
  </wj-flex-grid-column-group>

  <wj-flex-grid-column-group
    [header]="'Performance'"
    [collapseTo]="'perf.ytd'">
    <wj-flex-grid-column-group
      [binding]="'perf.ytd'"
      [header]="'YTD'">
    </wj-flex-grid-column-group>
    <wj-flex-grid-column-group
      [binding]="'perf.m1'"
      [header]="'1 M'">
    </wj-flex-grid-column-group>
    <wj-flex-grid-column-group
      [binding]="'perf.m6'"
      [header]="'6 M'">
    </wj-flex-grid-column-group>
  </wj-flex-grid-column-group>

  <wj-flex-grid-column-group
    [header]="'Allocation'"
    [collapseTo]="'alloc.amount'">
    <wj-flex-grid-column-group
      [binding]="'alloc.stock'"
      [header]="'Stocks'">
    </wj-flex-grid-column-group>
    <wj-flex-grid-column-group
      [binding]="'alloc.bond'"
      [header]="'Bonds'">
    </wj-flex-grid-column-group>
    <wj-flex-grid-column-group
      [binding]="'alloc.amount'"
      [header]="'Amount'">
    </wj-flex-grid-column-group>
  </wj-flex-grid-column-group>
</wj-flex-grid>

• collapseTo names the child column that remains visible when its group is collapsed. The binding values should match fields in your data. 

Add Collapse and Expand buttons

Place buttons in the same component template and bind their click events to a component method.

<button
  type="button"
  (click)="setGridColumnsCollapsedState(true)">
  Collapse
</button>

<button
  type="button"
  (click)="setGridColumnsCollapsedState(false)">
  Expand
</button>

• The Collapse button passes true; the Expand button passes false.

Set the state of every group

In the component class, get the FlexGrid instance with @ViewChild. Recursively visit each group and its child groups, setting isCollapsed.

import { ViewChild } from "@angular/core";
import { FlexGrid } from "@mescius/wijmo.grid";

export class AppComponent {
  @ViewChild("flex") flex!: FlexGrid;

  setGridColumnsCollapsedState(state: boolean): void {
    const grid = this.flex;
    if (!grid) return;

    grid.deferUpdate(() => {
      const setGroupState = (groups: any): void => {
        groups.forEach((group: any) => {
          if (group.columns && group.columns.length > 0) {
            group.isCollapsed = state;
            setGroupState(group.columns);
          }
        });
      };

      setGroupState(grid.getColumnGroups());
    });
  }
}

• getColumnGroups() returns the top-level groups. The helper walks through nested groups too, and deferUpdate batches the state changes.

With this setup, users can click Collapse to collapse all configured column groups or Expand to show them again. Each collapsed group keeps its configured collapseTo column visible, and nested groups are updated along with their parents.

Happy coding!