Row Selection

The TreeList provides the user with multiple interaction options to select rows, which are:

• Single Row Selection
• Multiple Rows Selection
• Select-All Checkbox
• Checkbox Selection of Child Rows

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 Space on 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 & Space on 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 & Space on 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 Shift and 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 press Ctrl & Space on 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 Ctrl and click the specific row, or
• Press Ctrl & Space on 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 Space on a row within the TreeList (only when the Keyboard Navigation is enabled).

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 checkChildren is set to true.

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 checkChildren is set to true.

The following example demonstrates checkbox selection for child rows.

Suggested Links

• SelectableDirective
• SelectableSettings
• API Reference of the TreeListComponent
• API Index of the TreeList