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.

Advertisements

One thought on “Kendo TreeView indeterminate checkbox for remote datasource and ondemand loading

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s