Selection Basics

The TreeList enables the user to select single or multiple cells and rows.

Setup

To enable the selection, apply the built-in kendoTreeListSelectable directive.

To configure the selection, use the selectable option. It accepts both boolean and SelectableSettings parameters. If you use a SelectableSettings parameter, the Kendo UI TreeList for Angular enables you to specify the following options:

• mode—Sets the mode of the selection either to "row" or "cell". The default value is "row".
• multiple—Determines if multiple selection is enabled. The default value is false.
• drag—Configures the drag selection. The default value is true, but it has no effect unless multiple is set to true.
• enabled—Determines if the selection functionality is enabled. The default value is true.

  Setting this option to false will stop all selection-related functionality. This means that:

  • The end user will not be able to select and deselect rows using the mouse or keyboard.
  • Items in the selectedItems collection will not be rendered as selected.
  • The isSelected callback will be ignored.

• readonly—Determines whether the end user will be able to modify the selection. The default value is false.

  When the selection functionality is enabled and readonly is set to true, programmatic selection is still possible by using the selectedItems collection or the isSelected callback.

Row Selection Mode

The TreeList provides the user with interaction options to select:

• A single row
• Multiple rows

The built-in checkbox column compliments the row selection mode and adds the options to select:

• All rows through the "Select All" checkbox
• All child rows through the parent checkbox

Single Row Selection Mode

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 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 Keyboard Navigation is enabled).

If you click the selected row, it will not be deselected.

Multiple Row Selection Mode

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 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 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 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 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 how to apply the default behavior of the select-all checkbox.

Cell Selection Mode

The TreeList provides the user with interaction options to select:

• A single cell
• Multiple cells

The Checkbox Column should not be used in cell selection mode.

Single Cell Selection Mode

To select a cell when the TreeList is in single selection mode:

• Click the cell, or
• Press Space (only when Keyboard Navigation is enabled).

To deselect a cell when the TreeList is in single selection mode:

• Press and hold Ctrl, and click the selected cell, or
• Press Ctrl & Space (only when Keyboard Navigation is enabled).

If you click the selected cell, it will not be deselected.

Multiple Cell Selection Mode

To select multiple cells one by one when the TreeList is in multiple selection mode:

• Press and hold Ctrl, and click the desired cells, or
• Navigate using the arrow keys and press Ctrl & Space on the desired cells (only when Keyboard Navigation is enabled).

To select a range of cells when the TreeList is in the multiple selection mode, either:

• Click and drag the rectangular selection over the desired cells, or
• Press and hold Shift and click the cell you want to be the last in the range. As a result, cells in the rectangular area between the initially selected cell and the last one are selected, or
• Select a cell by pressing Space, then navigate using the arrow keys and press Shift & Space on the cell you want to be the last in the selected range (only when Keyboard Navigation is enabled).

To deselect one cell at a time, press and hold Ctrl and click the specific cell.

To leave only the current cell selected and deselect all previously selected cell, click a cell within the TreeList.

Persisting the Selection

To define the collection that will store the selected items, specify the selectedItems option together with the kendoTreeListSelectable. This approach provides you with full control over the selection state—for example, it allows you to specify initially selected items, manually update the collection, and so on.

Persisting Row Selection

By default, row selection is persisted by using the idField of the data item as key. If no idField is specified, the data item is persisted by reference.

To persist the row selection based on the value of a specific field, set the itemKey to the name of the field.

The following example demonstrates how to store the selected items by the name field.

To persist the row selection based on a computed value, such as a composite key, set the itemKey to a function that returns the key value for a given data item.

The following example demonstrates how to store the selected items by a key that concatenates two data item fields.

Persisting Cell Selection

By default, cell selection is persisted by using the idField and the cell index as key. If no idField is specified, the data item is persisted by reference.

The following example demonstrates how to store the selected items by the name field and cell index.

To persist the cell selection based on a computed value, such as a composite key, set the itemKey to a function that returns the key value for a given data item. The columnKey can be set to a function to customize the persisted column key value.

The following example demonstrates how to store the selected items by a key that concatenates two data item fields.

Disabling the Selection of Specific Elements

By default, the TreeList handles clicks which are made on non-focusable elements and performs selection. To disable the default behavior for custom or specific non-focusable elements, set the "k-treelist-ignore-click" class.

Suggested Links

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