Search code examples
csskendo-uikendo-treeview

Kendo treeview expand UI overlapping icons

I have a Kendo UI treeview which contains some node that i load children on expand by firing a ajax call and returning a data array. This works fine and i get the data and it binds to the tree.

However the issue occurs after the first expand of a node, when i expand the node first time the tree behaves correctly and everything is fine, however if i collapse and expand the node again the tree does not push the other nodes down and the expanded node overlaps all other icons in tree.

Expanded on first run

Expdaded on first run

Second Expand

enter image description here

This happens for all the nodes that i expand on the 2nd run.

Here is the code that i use to build the tree

$('#all-library-tree').kendoTreeView({
        loadOnDemand: true,
        dataSource: _masterTreeViewMasterObj.sort().reverse(), // top level nodes
        dataTextField: "text",
        expand: function (e) {
            var treeView = $('#all-library-tree').data('kendoTreeView');
            var dataItem = treeView.dataItem(e.node);
            dataItem.load();

            if (dataItem.children.data().length !== 0) return;


            if (dataItem.id === -1) {
                //get unused data children for node 
                GetUnUsedChildrenForRHSTree(dataItem.text, dataItem.children);
            }

        }
    });
Solution

  • So i was able to fix this issue by adding dataItem.loaded("false"); just before dataItem.load(); hope this helps someone in the future.