Row Selection

Updated on Sep 1, 2026

The Angular TreeList provides the user with multiple interaction options to select rows:

Single Row Selection

Enable users to select one row at a time using click, checkbox, or keyboard navigation.

Multiple Rows Selection

Select multiple rows individually, in ranges, or with drag selection using keyboard modifiers.

Checkbox-Only Selection

Restrict row selection to checkboxes only, preventing selection through row clicks.

Select-All Checkbox

Add a header checkbox to select or deselect all items at once.

Checkbox Selection of Child Rows

Automatically select or deselect child rows when the parent checkbox is toggled.

The following example demonstrates the row selection in action.

Example

View Source

Loading ...

Single Row Selection

To select a row in single selection mode, use one of the following actions:

• Click the row.
• Select the row's checkbox.
• Press Space on the row (available only when Keyboard Navigation is enabled).

To deselect a row in single selection mode, use one of the following actions:

• Deselect the checkbox of the selected row.
• Press and hold Ctrl/Cmd(MacOS), then click the selected row.
• Press Ctrl + Space or Cmd + Enter (MacOS) on the row (available only when Keyboard Navigation is enabled).

Clicking a selected row will not deselect it.

The following example demonstrates how to select or deselect a single row using the actions described above.

Example

View Source

Loading ...

Multiple Rows Selection

The following table summarizes the available actions for selecting multiple rows in the TreeList:

Action	Description	Keyboard/Mouse Interaction	Requirements
Select multiple rows one by one	Select rows individually without affecting other selected rows.	• Select the checkbox of each desired row. • Press and hold Ctrl/Cmd(MacOS), and click the desired rows. • Press Shift + Space on the desired rows.	Requires Keyboard Navigation for Shift + Space.
Select a range of rows	Select a continuous range of rows by defining a start and end point. Any new selection resets the previous one.	• Click and drag the rectangular selection over the desired rows. • Select a row, then press and hold Shift and click the last row in the range. • Press Space to select a row, navigate with arrow keys, and press Ctrl + Space or Cmd + Enter (MacOS) on the last row.	• Drag selection requires the drag option. • Requires Keyboard Navigation for keyboard shortcuts.
Deselect a row	Remove a specific row from the selection.	• Deselect the checkbox of the specific row. • Press and hold Ctrl/Cmd(MacOS), then click the specific row. • Press Ctrl + Space or Cmd + Enter (MacOS) on the desired row.	Requires Keyboard Navigation for Ctrl + Space / Cmd + Enter.
Leave only one row selected	Deselect all previously selected rows and keep only the current row selected.	• Click a row within the TreeList. • Press Space to select the active row.	Requires Keyboard Navigation for Space.

The following example demonstrates how to select and deselect multiple rows using the actions described above.

Example

View Source

Loading ...

Checkbox-Only Selection

The TreeList component provides the ability to select rows only through a dedicated checkbox associated with each respective row. To enable the checkbox-only selection, set the checkboxOnly property to true.

html

<kendo-treelist
    [data]="data"
    [selectable]="{ checkboxOnly: true }"
    kendoTreeListSelectable
>
    <kendo-treelist-checkbox-column [width]="35"></kendo-treelist-checkbox-column>
    ...
</kendo-treelist>

You can combine the checkbox-only selection with single or multiple selection mode. To select rows in the TreeList when checkbox-only selection is enabled, use the checkboxes of the desired rows.

Checkbox selection is supported only in row selection mode and is not compatible with cell selection mode.

The following example demonstrates the checkbox-only option with single row selection.

Example

View Source

Loading ...

Select-All Checkbox

The TreeList allows the selection or deselection of all items through a select-all checkbox in its header. To enable the select-all feature, set the showSelectAll option of CheckboxColumnComponent to true.

The TreeList select-all checkbox selects all loaded items across all pages. When checkChildren is set to true, clicking the select-all checkbox also triggers the loading and selection of child nodes.

The following example demonstrates how to apply the default behavior of the select-all checkbox.

Example

View Source

Loading ...

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.

Example

View Source

Loading ...

Suggested Links

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