How to check a kendo ui treeview child nodes based upon a kendo ui grid data

0
votes

On an asp.net mvc page, I have a Kendo UI grid and a Kendo UI treeview. The treeview has checkboxes and the treeview has two tier data. Then once the grid is populated, I want to loop through the rows, find the corresponding id, then loop through the treeview and find the node with the same id and make it checked. The following is my code:

Grid code:

dataBound: function () {
        var rows = this.tbody.children();
        var dataItems = this.dataSource.view();
        for (var i = 0; i < dataItems.length; i++) {
            kendo.bind(rows[i], dataItems[i]);                
            bindCheckboxToId(dataItems[i].ID);
        }
    }

The javascript function to set the treeview node to be checked:

function bindCheckboxToId(id) {
    var treeView = $("#treeview").data("kendoTreeView");
    var myNodes = treeView.dataSource.view();
    for (var i = 0; i < myNodes.length; i++) {
        var children = myNodes[i].children.view();
        alert(children.length);
        if (children) {
            for (var j = 0; j < children.length; j++) {                
                if (children[j].id === id) {
                    children[j].set("checked", true);
                }
         }
    }
}

The problem is that, the children.length always comes as 0, although each parent node has two child nodes.

Thanks

1
asp.net-mvckendo-ui
It may be because the children nodes are loaded only when a parent is expanded? I don't know whether there is an event for "expand" or like. – Massey

1 Answers

3
votes

We have to force the tree view to load the child nodes. The following is the updated code:

function bindCheckboxToId(id) {
    var treeView = $("#treeview").data("kendoTreeView");
    var myNodes = treeView.dataSource.view();
    for (var i = 0; i < myNodes.length; i++) {
        myNodes[i].load();
        var children = myNodes[i].children.view();
        //alert(children.length);
        if (children) {
            for (var j = 0; j < children.length; j++) {
                if (children[j].id === id) {
                    children[j].set("checked", true);
                }
            }
        }
    }
}