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
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)
As of the 2022 R3 release, the
Changeevent will now be fired only when Selection/Deselection is performed.
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);
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.
- Call the
select()client-side API method. The method will return an array with the elements of the selected items. - 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();
The TreeList does not support the simultaneous usage of the built-in checkbox-column selection and the selection which is enabled through the
Selectableoption.