Selection

By default, selection in the TreeList is disabled.

To boost the performance of the TreeList when it loads a large dataset and the selection functionality is enabled, use paging and a reasonable page size.

The TreeList exposes different modes of row selection:

• Row Selection
• Cell Selection
• Row Checkbox Selection

Row Selection

To enable the selection functionality of the TreeList, set the Selectable option to true. As a result, the default single-row selection functionality will be applied.

    .Selectable(true)

To enable the multiple row selection, set the Mode option of the Selectable configuration to the enum value Multiple:

     .Selectable(s => s.Mode(TreeListSelectionMode.Multiple))

As of the 2022 R3 release, the Change event will now be fired only when Selection/Deselection is performed.

Cell Selection

The TreeList component allows you to select a single or multiple cells at a time through the Selectable() and Type() methods.

     .Selectable(s => s.Mode(TreeListSelectionMode.Multiple).Type(TreeListSelectionType.Cell))

Single Row Checkbox Selection

To enable checkbox selection, add a column to the columns collection of the TreeList and set the Selectable option to true:

    columns.Add().Selectable(true);

The TreeList does not support the simultaneous usage of the built-in checkbox-column selection and the selection which is enabled through the Selectable option.

To get the currently selected items, you can use the TreeList client-side API. The following example demonstrates how to access and store the data items of the selected TreeList items.

1. Call the select() client-side API method. The method will return an array with the elements of the selected items.
2. Loop through the selected items and call the dataItem() method for each element to access the data item.

    var treeListWidget = $("#treeList").data("kendoTreeList"); // Get a reference to the defined TreeList component.
    var selectedItemsElements = treeListWidget.select();
    var selectedDataItems = [];
    $.each(selectedItemsElements, function(){
        let dataItem = treeListWidget.dataItem($(this)); // Access the data item.
        selectedDataItems.push(dataItem); //Store the data item in an array.
    });
    console.log(selectedDataItems);

To select or deselect all child items of the currently selected row, enable the IncludeChildren() option:

    columns.Add().Selectable(true).IncludeChildren();

In some scenarios, the specified TreeList rows must be selected by default. The following example demonstrates how to initially select rows based in the value of a data item property.

    @(Html.Kendo().TreeList<Kendo.Mvc.Examples.Models.TreeList.EmployeeDirectoryModel>()
    .Name("treelist")
    .Columns(columns =>
    {
        columns.Add().Selectable(true);
        columns.Add().Field(e => e.EmployeeId);
    })
    .Events(evt => evt.DataBound("onDataBound"))
    ...
    )

    <script>
        function onDataBound(e) {
            var treeList = e.sender;
            var items = treeList.items();
            for (var i = 0; i < items.length; i++) {
                var dataItem = treeList.dataItem(items[i]);
                if(dataItem.EmployeeId % 2 == 0) {
                    treeList.select($(items[i]));
                }
            }
        }
    </script>

See Also

• Selection of the TreeList HtmlHelper for ASP.NET MVC (Demo)
• Server-Side API