Search

Vue Data GridTree Data - Expanding Groups

Enterprise

Configure the initial expanded group row state when using Tree Data.

Expanding by Group Level

When providing a hierarchy, all levels will default to a collapsed state. This can be configured by setting the groupDefaultExpanded grid option, providing a number will expand all groups down to that level, or providing -1 will expand all groups.

The example above uses the following configuration to expand the first level of groups, but no others:

<ag-grid-vue
    :groupDefaultExpanded="groupDefaultExpanded"
    /* other grid options ... */>
</ag-grid-vue>

this.groupDefaultExpanded = 1;

Expanding via Callback

To granularly determine which groups should be expanded by default, use the isGroupOpenByDefault grid callback.

isGroupOpenByDefault
Function
(Client-side Row Model only) Allows groups to be open by default.

The example above uses the following configuration to expand the ProjectBeta groups by default:

<ag-grid-vue
    :isGroupOpenByDefault="isGroupOpenByDefault"
    /* other grid options ... */>
</ag-grid-vue>

this.isGroupOpenByDefault = (params) => {
    return (
        (params.level === 0 && params.key === 'Documents') ||
        (params.level === 1 && params.key === 'Work') ||
        (params.level === 2 && params.key === 'ProjectBeta')
    );
};

Row keys are not always unique, so it is recommended to instead use the node ID or data path to identify the row.

Scrolling Child Rows into View

When expanding a group the vertical scroll does not change, which can result in the child rows not being visible. You can use the ensureIndexVisible() function on the API to ensure the index is visible, scrolling the table if needed.

In the example below, if you expand a group at the bottom, the grid will scroll so that all of the children of the group are visible.

API

The grid exposes API methods to expand or collapse groups programmatically.

expandAll
Function
Expand all groups.
collapseAll
Function
Collapse all groups.
setRowNodeExpanded
Function
Expand or collapse a specific row node, optionally expanding/collapsing all of its parent nodes. By default rows are expanded asynchronously for best performance. Set forceSync: true if you need to interact with the expanded row immediately after this function.

Expand Row Ancestors

When expanding rows via the API, the setRowNodeExpanded function can be used to expand a specific row as well as all of its ancestors.

The example above uses Row IDs to demonstrate the following configuration to expand all of the 'Proposal.docx' rows ancestors:

const expandToRow = () => {
  const node = gridApi.getRowNode('Proposal.docx');
  if (node) {
      gridApi.setRowNodeExpanded(node, true, true);
  }
}

Next Up

Continue to the next section to learn how to enable Tree Selection.