Kendo Treeview - Disable all child nodes

Question

I have a requirement where I have a kendo treeview with checkboxes and have to disable the child nodes when the parent check box is checked.

My treeview is bound to a heirarchical data model from through MVC model binding.

@(Html.Kendo().TreeView()
                  .Name("TreeViewModel")
                  .Checkboxes(true)
                  .CheckboxTemplateId("treeview-template")
                  .ExpandAll(true)
                  .HighlightPath(true)
                  .BindTo(Model.TreeViewData)
                  .DragAndDrop(false)
                  .LoadOnDemand(false)

And my checkbox template looks like

<input type="checkbox" onclick="Addnode('#: item.text #', '#: item.id #', this.checked)" id ="#: item.id #" />

I am trying to get the list of child nodes for the checked node, but havent progressed much. In the AddNode function I use

    var dataSource = treeview.dataSource;
    var dataItem = dataSource.get(id);
    var node = treeview.findByUid(dataItem.uid);

to get the selected node, but node.hasChildren returns undefined and I dont seem to find a solution to get a list of child nodes for this one.

I have tried the JS fiddle here Js Fiddle

Can someone help me out here please.

OnaBai OnaBai · Accepted Answer · 2014-08-22T14:59:06

Define the following JavaScript code:

$("#treeview").on("change", ":checkbox", function(e) {
    // Get reference to the Tree View
    var treeview = $("#treeview").data("kendoTreeView");

    // Get the node owning the checked checkbox
    var current = $(e.target).closest("li.k-item");

    // Enable or Disable any child items depending if current item is checked or not  
    treeview.enable($(".k-item", current), !e.target.checked);
});

Your code modified here : http://dojo.telerik.com/@OnaBai/akoYU

Kendo Treeview - Disable all child nodes

1 Answers