Search code examples
ag-gridag-grid-angular

How to expand the first group level in ag-grid-angular


I have an ag-grid where rows are grouped by two columns by default, but the groups are collapsed.

colDefs = 
[
  {
    field: 'colA',
    rowGroupIndex: 0,
  },
  {
    field: 'colB',
    rowGroupIndex: 1
  },
  …
];

I would like to have the first group level expanded like this:

- ColA 1
  + COlB 1 (5)
  + ColB 2 (3)
- ColA 2
  + COlB 3 (1)
  + COlB 4 (9)
  + COlB 5 (11)

Where is the best place to expand the first level groups?


Solution

  • Have a look at the plunk I've created: ag-grid: expand groups in ag-grid-angular

    this.gridApi.expandAll();
    

    For more reference, have a look at the documentation: Built In Menu Items

    expandAll: Expand all groups. Only shown if grouping by at least one column.


    Update:

    The above point expands nodes at all levels. Below solution is to achieve as per what you need.

    Have a look at the another plunk I've created: ag-grid: expand the first group level in ag-grid-angular

    I am simply programmatically expanding the nodes which are at 0 level.

    this.gridApi.forEachNode((node, b) => {
      if (node.level === 0) {
        node.setExpanded(true);
      }
    });