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-angular
[rowSelection]="rowSelection"
/* other grid options ... */ />
this.rowSelection = {
mode: 'multiple',
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 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:
<ag-grid-angular
[autoGroupColumnDef]="autoGroupColumnDef"
[rowSelection]="rowSelection"
/* other grid options ... */ />
this.autoGroupColumnDef = {
cellRendererParams: {
checkbox: true,
},
};
this.rowSelection = {
mode: 'multiRow',
checkboxes: false,
headerCheckbox: false,
};
Next Up
Continue to the next section to learn how to configure Filtering.