How to Collapse or Expand All Grouped Columns in Vue

Background

FlexGrid supports nested column groups in Vue templates. Set collapseTo to choose which child column remains visible when a group is collapsed, and update each group’s isCollapsed property to control its state.

Steps to Complete

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

Getting Started

Install the Wijmo Vue grid and styles packages that match your Wijmo version. The Vue wrapper package retains vue2 in its name and supports Vue 2 and Vue 3.

npm install @mescius/wijmo.vue2.grid @mescius/wijmo.styles

Import the grid components and styles in the same Vue component.

import {
  WjFlexGrid,
  WjFlexGridColumnGroup
} from "@mescius/wijmo.vue2.grid";
import "@mescius/wijmo.styles/wijmo.css";

Define the column groups

Add nested <wj-flex-grid-column-group> components inside the grid. The bindings should match fields in your data.

<wj-flex-grid
  :itemsSource="data"
  :autoGenerateColumns="false"
  :initialized="initializeGrid"
>
  <wj-flex-grid-column-group binding="name" header="Name" />

  <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 binding="perf.m1" header="1 M" />
    <wj-flex-grid-column-group binding="perf.m6" header="6 M" />
  </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 binding="alloc.bond" header="Bonds" />
    <wj-flex-grid-column-group binding="alloc.amount" header="Amount" />
  </wj-flex-grid-column-group>
</wj-flex-grid>

• Each collapseTo value names the child column that stays visible when its group is collapsed.

Add the Collapse and Expand buttons

Bind each button’s click event to the method that updates the groups.

<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 your Vue component, save the FlexGrid instance from its initialized callback. Then walk through its column groups and nested child groups, setting isCollapsed.

import { ref } from "vue";

const grid = ref(null);

function initializeGrid(flexGrid) {
  grid.value = flexGrid;
}

function setGridColumnsCollapsedState(state) {
  const flexGrid = grid.value;
  if (!flexGrid) return;

  flexGrid.deferUpdate(() => {
    function setGroupState(groups) {
      groups.forEach((group) => {
        if (group.columns && group.columns.length > 0) {
          group.isCollapsed = state;
          setGroupState(group.columns);
        }
      });
    }

    setGroupState(flexGrid.getColumnGroups());
  });
}

• The initialized callback provides the FlexGrid control. The helper starts with its top-level groups and recurses through their children; deferUpdate batches the 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 parent groups.

Happy coding!