Custom Selection
The Angular TreeList provides low-level hooks for implementing custom selection logic.
Setting the Selected Rows
You can set the selected rows by specifying the isSelected function. The function is executed for each data row in the TreeList and determines whether the row will be selected.
The built-in
kendoTreeListSelectabledirective applies its ownisSelectedcallback to determine which rows or cells will be selected. To override the default behavior, do not apply the directive when using a customisSelectedcallback. To refresh the selected state and force re-evaluation of theisSelectedcallback, invoke theupdateViewmethod.
The following example demonstrates row selection with the isSelected callback.
Setting the Selected Cells
To set the selected cells programmatically, specify the isSelected function. The function is executed for each data cell in the TreeList and determines whether the cell will be selected based on the dataItem and columnIndex values.
The following example demonstrates cell selection with the isSelected callback.
Persisting Selection in Data Items
You can persist the selected state of rows in the TreeList by using the isSelected callback together with the selectionChange event.
The following example demonstrates how to maintain the selected state as a field on the data item.
Disabling the Selection of Specific Elements
The TreeList automatically handles clicks made on non-focusable elements and performs selection. To disable this default behavior for custom or specific non-focusable elements, apply the k-treelist-ignore-click class.
<ng-template kendoTreeListCellTemplate let-dataItem>
<div class="k-treelist-ignore-click">
Ignored Element
</div>
{{ dataItem.name }}
</ng-template>The following example prevents the row selection when clicking on the custom element displayed inside the cell.