JavaScript Data GridRow Grouping - Opening Groups
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
andyear
column definitions haverowGroup=true
declared. -
All
country
row groups are expanded by default asgroupDefaultExpanded = 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:
Properties available on the IsGroupOpenByDefaultParams<TData = any, TContext = any>
interface.
row | The row node being considered. |
row | The Column for which this row is grouping. |
levelTypenumber | Same as rowNode.level - what level the group is at, e.g. 0 for top level, 1 for second etc |
fieldTypestring | Same as rowNode.field - the field we are grouping on, e.g. 'country' |
keyTypestring | Same as rowNode.key , the value of this group, e.g. 'Ireland' |
apiTypeGridApi | The grid api. |
contextTypeTContext | Application context as set on gridOptions.context . |
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:
When more custom behaviour is required, obtain a reference to the rowNode and then call api.setRowNodeExpanded(rowNode, boolean)
.
For example, to expand a group with the name 'United States' would be done as follows:
api.forEachNode(node => {
if (node.key === 'United States') {
api.setRowNodeExpanded(node, 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.