Unable to deselect the selected node in KendoUI tree view

Question

I have a tree-like structure using Kendo UI tree view. Each node is displayed as a hyperlink and on clicking each one, a new kendotabstrip will be opened. My problem is if I select one node, the results are displayed fine in a new tab but if I close the newly opened tab and then select the same node then no new tab is opened since the node has already been selected. If I have to choose the same node, then I have to access another node and then come back to node.

I tried to deselect the selected item once the new tab is opened using the following snippet:

var treeview=$(#grpTree).data("KendoTreeView");

var selNode=treeview.select(); 

selNode.find("span.k-state-selected").removeClass("k-state-selected")

but the node is not getting deselected. Is there any other way to do it or have I missed out anything?

score 8 · Answer 1 · answered Apr 26 '13 at 18:41

8

I know this post is a bit dated, but as Telerik is continually upgrading its components, I thought I'd put this here so that people can be aware of this change moving forward.

You can deselect all selected nodes with the following syntax:

    var treeView = $("#treeView").data("kendoTreeView");
    treeView.select($());

Source: Kendo UI Treeview Documentation for Select

answered Apr 26 '13 at 18:41

Jark Monster

753
1
13
24

The key thing to note here is you're telling `treeview` to select an empty `$()` jQuery object – darronz May 21 '14 at 08:57

score 1 · Answer 2 · answered Dec 11 '12 at 21:48

Yes this is by design. If you want to attach a click handler which will be triggered each time (no matter if the node is already selected). You can attach a delegate event like the following:

$('#treeviewName').on('click','.k-item',function(e){
      var clickedNode = $(this);
      var treeViewClientObject = $(e.delegateTarget).data().kendoTreeView;
})

score 1 · Answer 3 · answered Jun 17 '16 at 04:27

1

My code:

var treeview=$(#grpTree).data("KendoTreeView");

treeview.select(null);

answered Jun 17 '16 at 04:27

nosaxw

11
1

score 0 · Answer 4 · answered Jan 15 '15 at 12:36

This calls the change function always, so this can be another solution:

    $("#favorite_tree").kendoTreeView({
change: function () {
    if (this.dataItem(this.select())) {
        var treeView = $("#calendar_tree").data("kendoTreeView");
        treeView.select($());
    }
}
}).data('kendoTreeView');

$("#calendar_tree").kendoTreeView({
change: function () {
    if (this.dataItem(this.select())) {
        var treeView = $("#favorite_tree").data("kendoTreeView");
        treeView.select($());
    }
 }
}).data('kendoTreeView');

Unable to deselect the selected node in KendoUI tree view

4 Answers4