Vue Data GridRow Grouping - Hierarchy Selection

Row Selection can be configured with groups to select all of a rows descendants.

Selecting Descendants

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

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

• 'self': Selecting a group row has no additional side effects.
• 'descendants': Selecting a group row will select all of its descendants.
• 'filteredDescendants': Selecting a group 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: 'multiple',
    groupSelects: 'descendants',
};

Checkboxes in Group Cells

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

This can be configured on by setting the rowSelection.checkboxLocation option 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',
    checkboxLocation: 'autoGroupColumn',
};

Next Up

Continue to the next section to learn Sorting Groups.