Vue Data GridTree Data - Tree Selection

Row Selection can allow users to select rows in a tree structure.

Selecting Descendants

When using Multiple Row Selection with a tree structure, the grid can be configured to impact descendant and ancestor rows when a row is selected.

To enable hierarchical selection, set the rowSelection.groupSelects option to one of the following values:

• 'self': Selecting a parent row has no additional side effects.
• 'descendants': Selecting a parent row will select all of its descendants.
• 'filteredDescendants': Selecting a parent row will select all of its descendants that pass the filter.

The example above demonstrates the following configuration:

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

this.rowSelection = {
    mode: 'multiRow',
    groupSelects: 'descendants',
};

Checkboxes in Group Cells

When using Row Selection with Tree Data, the grid can be configured to render checkboxes in the group cell, to the right of the expand/collapse chevron.

This can be configured by setting the rowSelection.checkboxLocation to 'autoGroupColumn'.

The example above demonstrates the following configuration to render checkboxes in the group cell:

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

this.rowSelection = {
    mode: 'multiRow',
    checkboxeLocation: 'autoGroupColumn',
    headerCheckbox: false,
};

Next Up

Continue to the next section to learn how to configure Filtering.