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?

Answer 1

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;
})

Answer 2

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