New to Kendo UI for Angular? Start a free 30-day trial

Selection Basics

The TreeList allows the user to select single or multiple cells and rows. It provides a rich API for customizing the selection logic and persisting the selected items based on specific requirements.

Setup

Enable the selection by applying 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 does not apply unless multiple is set to true.
  • enabled—Determines if the selection functionality is enabled. The default value is true.
  • 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 possible by using the selectedItems collection or the isSelected callback.

The following articles cover a range of common selection scenarios, offering detailed guidance and insights for each:

The following example demonstrates the different selection modes and settings for the TreeList component.

Example
View Source
Change Theme:

Selection Change Event

When the user modifies the selection, the TreeList emits one or more selectionChange events. Each contains the following information:

  • action—A verb that describes the user action:
    • "select"—When resetting the selection, for example, on item Click.
    • "add"—When adding items to the selection, for example, on item Ctrl + Click.
    • "remove"—When removing items from the selection, for example, on item Ctrl + Click.
  • items—A collection of items affected by the action.
  • sender—A reference to the TreeListComponent.

Disabling the Selection of Specific Elements

By default, the TreeList handles clicks over 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.

Example
View Source
Change Theme: