Row Selection
The TreeList provides the user with multiple interaction options to select rows, which are:
The following example demonstrates the row selection in action.
Single Row Selection
To select a row when the TreeList is in single selection mode, use either of the following actions:
- Click the row, or
- Select the checkbox of the row, or
- Press
Spaceon the row (only when the Keyboard Navigation is enabled).
To deselect a row when the TreeList is in single selection mode, either:
- Deselect the checkbox of the selected row, or
- Press and hold
Ctrl, and click the selected row, or - Press
Ctrl&Spaceon the row (only when the Keyboard Navigation is enabled).
If you click the selected row, it will not be deselected.
Multiple Rows Selection
To select multiple rows one by one when the TreeList is in multiple selection mode, use either of the following actions:
- Select the checkbox of each desired row, or
- Press and hold
Ctrl, and click the desired rows, or - Press
Shift&Spaceon the desired rows (only when the Keyboard Navigation is enabled).
To select a range of rows when the TreeList is in the multiple selection mode, either:
- Click and drag the rectangular selection over the desired rows, or
- Select a row through its checkbox or by clicking it, then press and hold
Shiftand click the row you want to be the last in the selected range, or - Select a row by pressing
Space, then navigate using the arrow keys and pressCtrl&Spaceon the row you want to be the last in the selected range (only when the Keyboard Navigation is enabled).
To deselect one row at a time, either:
- Deselect the checkbox of the specific row, or
- Press and hold
Ctrland click the specific row, or - Press
Ctrl&Spaceon the desired rows (only when the Keyboard Navigation is enabled).
To leave only the current row selected and deselect all previously selected rows:
- Click a row within the TreeList, or
- Press
Spaceon a row within the TreeList (only when the Keyboard Navigation is enabled).
Checkbox-Only Selection
The checkbox-only mode allows you to configure the TreeList selection so that it is performed only by clicking the checkbox of the desired row. To enable this selection mode, set the checkboxOnly property to true. You can combine the checkbox-only selection with the single or the multiple modes.
The checkbox-only selection is applicable to the row selection mode, and is not compatible with cell selection.
The following example demonstrates the checkbox-only option with single row selection.
Select-All Checkbox
The TreeList allows the selection or deselection of all items on a page through a select-all checkbox in its header. To enable the select-all feature, set the showSelectAll option of CheckboxColumnComponent to true.
The "select all" feature will trigger the loading of child nodes if
checkChildrenis set totrue.
The following example demonstrates how to apply the default behavior of the select-all checkbox.
Checkbox Selection of Child Rows
The TreeList allows the selection or deselection of child items through the checkbox of the parent item. To enable the selection of child rows, set the checkChildren option of CheckboxColumnComponent to true.
Selecting a node will trigger the loading of child nodes if
checkChildrenis set totrue.
The following example demonstrates checkbox selection for child rows.