How to Collapse or Expand All Grouped Columns in JavaScript

Background

Wijmo FlexGrid lets you collapse or expand a column group by setting its isCollapsed property. Define a collapseTo binding for each group to specify which child column remains visible when the group is collapsed.

Steps to Complete

1. Define the grouped columns.
2. Add the buttons and connect their click handlers.
3. Set the state of all groups.

Getting Started

Import the Wijmo grid package and create a FlexGrid with your data and column definitions. Load the Wijmo styles in your application as well.

import "@grapecity/wijmo.styles/wijmo.css";
import * as wjGrid from "@grapecity/wijmo.grid";

const grid = new wjGrid.FlexGrid(document.getElementById("grid"), {
  itemsSource: getSampleData(),
  columns: getColumnsDef()
});

• Define getSampleData() to return rows with fields matching the column bindings. Add the button event listeners after creating the grid.

Define the grouped columns

Create column definitions with nested columns and a collapseTo binding for each group.

function getColumnsDef() {
  return [
    { binding: "name", header: "Name", width: 150 },

    {
      header: "Performance",
      collapseTo: "perf.ytd",
      columns: [
        { binding: "perf.ytd", header: "YTD", format: "p2" },
        { binding: "perf.m1", header: "1 M", format: "p2" },
        { binding: "perf.m6", header: "6 M", format: "p2" },
        { binding: "perf.m12", header: "12 M", format: "p2" }
      ]
    },

    {
      header: "Allocation",
      collapseTo: "alloc.amount",
      columns: [
        { binding: "alloc.stock", header: "Stocks", format: "p0" },
        { binding: "alloc.bond", header: "Bonds", format: "p0" },
        { binding: "alloc.cash", header: "Cash", format: "p0" },
        { binding: "alloc.amount", header: "Amount", format: "c0" }
      ]
    }
  ];
}

• collapseTo specifies the child column that stays visible when its group is collapsed. The bindings should match fields in your data.

Add the buttons and connect their click handlers

Add buttons and a host element for the grid to your HTML.

<button id="btnCollapse" type="button">Collapse</button>
<button id="btnExpand" type="button">Expand</button>
<div id="grid"></div>

After creating the grid, listen for button clicks:

document.getElementById("btnCollapse").addEventListener("click", function () {
  setGridColumnsCollapsedState(grid, true);
});

document.getElementById("btnExpand").addEventListener("click", function () {
  setGridColumnsCollapsedState(grid, false);
});

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

Set the state of all groups

Use deferUpdate to batch the changes. The helper sets each column’s state and walks up its parent groups, so nested groups and their parents are updated.

function setGridColumnsCollapsedState(grid, state) {
  grid.deferUpdate(function () {
    grid.columns.forEach(function (column) {
      setColGroupCollapseState(column, state);
    });
  });
}

function setColGroupCollapseState(group, state) {
  group.isCollapsed = state;

  if (group.parentGroup) {
    setColGroupCollapseState(group.parentGroup, state);
  }
}

With this setup, users can click Collapse to collapse all grouped columns or Expand to show them again. Each collapsed group keeps its configured collapseTo column visible.

Happy coding!