Kendo Grid UI: Collapse single Tree node instead of complete tree

1
votes

I have a Tree view data (3 Levels) in Kendo Grid and I am using Kendo Grid feature to Expand/collapse tree view. My requirement is to expand /collapse Tree Data level by level and not all at once.

Expand is working fine using the following code

$(".treeview").data("kendoTreeView").expand(".k-item");

Problem is with the collapse. By clicking the collapse button tree collapses completely but I want it to collapse only once.

I tried following 

$(".treeview").data("kendoTreeView").collapse(".k-item"); Collapses to first level
$(".treeview").data("kendoTreeView").collapse(".k-group"); same: Collapses to first level

I could use treeview.collapse(treeview.findByText("foo")); something like that but as the data is dynamic so I don't know the exact text.

Is there any way I can collapse only one node instead of the whole tree.

2
jquerykendo-uitreeviewkendo-grid

2 Answers

1
votes

If the node is dynamic first find its value by some function

function collapse() {

    var text= calculateNode(test);

    var treeview = $(".treeview").data("kendoTreeView");
    for (var i = 0; i < nTextValue.length; i++) {
        treeview.collapse(treeview.findByText(text[i]));
    }
}

and then collapse all nodes on that level

0
votes

This is working from an accordion and not a kendoGrid but I imagine it can work the same way.

var panelCol = $(".treeview").data("kendoTreeView")
panelCol.on('.collapse', function () {
    panelCol.not(document.getElementById($(this).attr('id'))).removeClass('in')
    .addClass('collapse').closest('.panel').find('a').addClass('collapsed');
});