I'm trying to select child nodes on parent node clicked. I couldn't find any example for select api. Should i use checkbox instead?
<button id="btn">Highlight third row</button>
<div id="treeList"></div>
<script>
$("#treeList").kendoTreeList({
columns: [
{ field: "id" },
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: true },
{ id: 2, parentId: 1, name: "John Doe", age: 24 },
{ id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
],
selectable: "multiple row"
});
</script>
I am trying to do that if select "1" (top parent), select 2,3 (child nodes). Hope there is native solution for javascript implementation. Thanks in advice!
The selection state is maintained by TreeList in the data items row rendering
<tr k-state-selected>, and that state is not reflected in the TreeListdataSource. Also, the data source is the only place the child relationship is discoverable. So there is a bit of back and forth to deal with selections and children.Also
TreeListdoes not have aselectevent likeTreeViewso out of the box you do not know which nodes were selected or deselected.The
changeevent fires when one action causes one or more rows (like shift-click can do) are caused to be selected or deselected. Within yourchangehandler you can only know the current state of all selected rows using theselect()method.Thus, within
change, you need to track prior selection state and current selection state to find which rows changed selection state, which would merit their children to be selected or deselected according to your requirement.See this Dojo for an example. It's not perfect because in the
changeevent you can only determine selected nodes and not know if a 'reselection' occurred (i.e. clicked on a selected row again). Anyway, the descent down the hierarchy of the TreeList is performed recursively and relies on thedataSourcedata item property.hasChildrenand dataSource method.childNodes()