JavaScript 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 selection.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:

const gridOptions = {
    selection: {
        mode: 'multiple',
        groupSelects: 'descendants',
    },

    // other grid options ...
}

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 on the Group Column Definition by setting the cellRendererParams.checkbox option to true.

The example above demonstrates the following configuration to render checkboxes in the group cell, and Removes the Default Checkboxes:

const gridOptions = {
    autoGroupColumnDef: {
        cellRendererParams: {
            checkbox: true,
        },
    },
    selection: {
        mode: 'multiRow',
        checkboxes: false,
        headerCheckbox: false,
    },

    // other grid options ...
}

Next Up

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