AG-Grid: Is there a way to make a button to expand / collapse the Column Grouping programmatically?

Question

I want to implement a button which allows us to expand/collapse all the Grouped Columns in a programmatic way. Something similar to the already existing expand/collapse icon but for all the column groups without using the pivot panel.

Column Expand/Collapse icon

I checked in the documentation, but I couldn't find anything related to this.

Answer 1

You can use the aggrid functions setColumnGroupState and getColumnGroupState along with some recursion to achieve this. Please find below working example.

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { ColDef, ColGroupDef, GridReadyEvent } from 'ag-grid-community';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';
import { IOlympicData } from './interfaces';

@Component({
  selector: 'my-app',
  template: `
    <button (click)="showAllColumns()">show all</button>
    <button (click)="hideAllColumns()">hide all</button>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [rowData]="rowData"
      [class]="themeClass"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
  `,
})
export class AppComponent {
  public columnDefs: (ColDef | ColGroupDef)[] = [
    {
      headerName: 'Athlete Details',
      columnGroupShow: 'open',
      // groupId: 'AthleteDetails',
      children: [
        {
          field: 'athlete',
          width: 180,
          columnGroupShow: 'closed',
          filter: 'agTextColumnFilter',
        },
        {
          field: 'age',
          width: 90,
          columnGroupShow: 'closed',
          filter: 'agNumberColumnFilter',
        },
        { headerName: 'Country', field: 'country', width: 140 },
      ],
    },
    {
      headerName: 'Sports Results',
      columnGroupShow: 'closed',
      // groupId: 'SportsResults',
      children: [
        { field: 'sport', width: 140 },
        {
          columnGroupShow: 'closed',
          field: 'total',
          width: 100,
          filter: 'agNumberColumnFilter',
        },
        {
          field: 'gold',
          width: 100,
          columnGroupShow: 'closed',
          filter: 'agNumberColumnFilter',
        },
        {
          field: 'silver',
          width: 100,
          columnGroupShow: 'closed',
          filter: 'agNumberColumnFilter',
        },
        {
          columnGroupShow: 'open',
          field: 'bronze',
          width: 100,
          filter: 'agNumberColumnFilter',
        },
      ],
    },
  ];
  public defaultColDef: ColDef = {
    filter: true,
  };
  public rowData!: IOlympicData[];
  public themeClass: string = 'ag-theme-quartz';
  gridOptions;

  constructor(private http: HttpClient) {}

  showAllColumns() {
    const columnGroupState = this.gridOptions.api.getColumnGroupState();
    this.setColumnGroupShowRecursive(columnGroupState, false);
    this.gridOptions.api.setColumnGroupState(columnGroupState);
  }

  hideAllColumns() {
    const columnGroupState = this.gridOptions.api.getColumnGroupState();
    this.setColumnGroupShowRecursive(columnGroupState, true);
    this.gridOptions.api.setColumnGroupState(columnGroupState);
  }

  setColumnGroupShowRecursive(columnDefs: any, columnGroupShowBool: boolean) {
    columnDefs.forEach((colDef: any) => {
      colDef.open = columnGroupShowBool;
      if (colDef.children && colDef.children.length) {
        this.setColumnGroupShowRecursive(colDef.children, columnGroupShowBool);
      }
    });
  }

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.gridOptions = params;
    this.http
      .get<IOlympicData[]>(
        'https://www.ag-grid.com/example-assets/olympic-winners.json'
      )
      .subscribe((data) => (this.rowData = data));
  }
}

plunkr