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 have the IsGroupOpenByDefaultParams interface:

Properties available on the IsGroupOpenByDefaultParams interface.

rowNode
The row node being considered.
rowGroupColumn
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
string
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.