Kendo TreeView indeterminate checkbox for remote datasource and ondemand loading

The task is to create a Treeview within a web application. The Treeview will contain more than 1k nodes in total and every node should have a checkbox to provide information about the check state of nodes within the tree. Checkboxes can have three states (checked, unchecked and indeterminate for parents where only some children are checked). I used Kendo UI Treeview component to solve the task. The problem was to get the indeterminate state of the checkboxes set without loading all the childnodes into the Treeview. For sure on server site the state information for every node has to be available.

My Solution:
Create a KendoUI Treeview with a checkbox template. Within that template add an attribute (here “data-indeterminate”) in case node is in indeterminate state. Additionally bind an event handler for DataBound (here “updateTree”).

@(Html.Kendo().TreeView()
    .Checkboxes(checkboxes =>
    {
        checkboxes.CheckChildren(true);
    })
    .LoadOnDemand(true)
    .DataTextField("Name")
    .Events(e => e.DataBound("updateTree"))
    .CheckboxTemplate("<input type='checkbox' name='checkedNodes' value='#= item.id #' #if(item.checked) { # checked # } if(item.indeterminate) { # data-indeterminate # } #/>")
    .DataSource(dataSource => dataSource.Read(read => read.Action("GetNodes", "TreeView")))
)

In the event handler for Treeview event DataBound find all input tags of type checkbox with attribute data-indeterminate and set the indeterminate state to true.

function updateTree() {
    $('input:checkbox[data-indeterminate]').each(function () {
        $(this)[0].indeterminate = true;
    });
};

This solution works pretty well for readonly Treeview.