Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

Angular Data Grid: Row Grouping - Opening Groups

This section covers different ways to control how row groups are expanded and collapsed.

Opening Group Levels by Default

To open all groups down to a given group level use the groupDefaultExpanded grid option as shown below:

<ag-grid-angular
    [columnDefs]="columnDefs"
    [groupDefaultExpanded]="groupDefaultExpanded"
    /* other grid options ... */>
</ag-grid-angular>

this.columnDefs = [
    { field: 'country', rowGroup: true },
    { field: 'year', rowGroup: true },
    { field: 'sport' },
    { field: 'total' }
];
// all 'country' row groups will be open by default
this.groupDefaultExpanded = 1;

In the snippet above, all country row groups will be expanded by default as groupDefaultExpanded = 1.

By default groupDefaultExpanded = 0 which means no groups are expanded by default. To expand all row groups set groupDefaultExpanded = -1.

The example below demonstrates the groupDefaultExpanded behaviour. Note the following:

  • There are two active row groups as the supplied country and year column definitions have rowGroup=true declared.
  • All country row groups are expanded by default as groupDefaultExpanded = 1.

Open Groups by Default

To have groups open by default, implement the grid callback isGroupOpenByDefault. This callback is invoked each time a group is created.

<ag-grid-angular
    [isGroupOpenByDefault]="isGroupOpenByDefault"
    /* other grid options ... */>
</ag-grid-angular>

// expand when year is '2004' or when country is 'United States'
this.isGroupOpenByDefault = params => {
    return (params.field == 'year' && params.key == '2004') ||
        (params.field == 'country' && params.key == 'United States');
};

The params passed to the callback are as follows:

interface IsGroupOpenByDefaultParams {
  rowNode: RowNode; // the Row Node being considered
  rowGroupColumn: Column; // the Column for which this row is grouping
  level: number; // same as rowNode.level - what level the group is at, e.g. 0 for top level, 1 for second etc
  field: string; // same as rowNode.field - the field we are grouping on, e.g. 'country'
  key: any; // same as rowNode.key, the value of this group, e.g. 'Ireland'
}

In the example below, the country 'United States' and year '2004' are expanded by default. Note that year '2004' is expanded for all countries, not just 'United States'.

Expand / Collapse Groups via API

It is possible to expand and collapse all group rows using the expandAll() and collapseAll() grid API's as shown below:

// Expand all group rows
this.gridApi.expandAll();

// Collapse all group rows
this.gridApi.collapseAll();

When more custom behaviour is required, obtain a reference to the rowNode and then call rowNode.setExpanded(boolean). For example, to expand a group with the name 'United States' would be done as follows:

this.gridApi.forEachNode(node => {
    if (node.key === 'United States') {
        node.setExpanded(true);
    }
});

The following example demonstrates different ways to expand / collapse row groups via the grid API.

Next Up

Continue to the next section to learn about grouping with Complex Objects.