JavaScript Data Grid

Row Grouping - Opening Groups

javascript logo
Enterprise

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:

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

    // other grid options ...
}

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.

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

    // other grid options ...
}

The params passed to the callback have the IsGroupOpenByDefaultParams interface: