Cannot unselect node in TreeView

[Christopher Hui]

I have defined a nodeSelect and nodeUnselect prop in the component, but cannot get the nodeUnselect to work.

When I click on a SELECTED node, it is still highlighted blue and the nodeUnselect callback is never invoked.

I want to be able to select, as well as unselect a node.

[Karthik Ravichandran]

Hi Christopher, 

  

Thanks for contacting Syncfusion support. 

 

We have analyzed your query (“nodeUnselect event not triggered”). We would like to inform you that, in ejTreeView, we couldn’t unselect the tree node using mouse click but we can able change the selection. So that only, the unselect event will not be triggered when change the selection in the tree view. 

 

When enable the allowMultiSelection option in ejTreeView, you can able to select and unselect the tree node using mouse click. So that nodeUnselect event will trigger here. 

 

Can you please share your exact requirement for trigger the nodeUnselect event of “ejTreeView” in your application? This will help us to provide the solution at earliest. 

 

Regards, 

Karthik R 

[Christopher Hui]

In my tree, you can ONLY select 1 node. That is why I do not want to allowMultiSelection.

I just want a way for there to be no nodes selected at all. I want to be able to click on a node to select it, then click on the selected node to unselect it. Clicking on another node is not sufficient. I want to be able to have NO selected nodes again.

[Karthik Ravichandran]

Hi Christopher, 

 

 

Thanks for your update. 

 

We have analyzed your query (“nodeUnselect not trigger”). Currently we don’t have an option to unselect the selected node by clicking it again. As a workaround, you can achieve your requirement in application level by using the TreeView public method “unselectNode”. Please refer the below code block 

 

<EJ.TreeView  id="treeView" nodeUnselect={this.nodeunselect}  nodeClick={this.nodeclick}> 

</EJ.TreeView> 

 

 

[script] 

 

nodeclick: function (e) { 

        var treeviewObj = $("#treeView").ejTreeView("instance"); 

        if (treeviewObj.isSelected($("#" + e.id))) { 

            setTimeout(function () { 

                treeviewObj.unselectNode($("#" + e.id)) 

            }.bind(this), 10) 

          

        } 

} 

 

For your convenience, we have prepared the sample and it can be available in the below location 

 

sample 

 

Please let us know if you need further assistance on this. 

 

 

Regards, 

Karthik R 

[Christopher Hui]

This does not appear to work...

I cannot select a node anymore. As soon as I click on a node, it alerts that the node was unselected..

[Christopher Hui]

I only want the click to be registered when it's clicking a node. That is why I am using nodeSelected rather than nodeClicked.

[Karthik Ravichandran]

Hi Christopher, 

 

Sorry for the inconvenience caused. 

 

We have analyzed your query (“I cannot select a node anymore. As soon as I click on a node, it alerts that the node was unselected”). We would like to inform you that, you can achieve your requirement by checking the target element in ejTreeView. Please refer the below code  

 

 

nodeclick: function (e) { 

        var treeviewObj = $("#treeView").ejTreeView("instance"); 

        if (treeviewObj.isSelected($("#" + e.id))) { 

            if ($(e.currentElement).hasClass('e-text')) { 

                setTimeout(function () { 

                    treeviewObj.unselectNode($("#" + e.id)) 

                }.bind(this), 10) 

            } 

        } 

} 

 

For your convenience, we have prepared the sample and it can be available in the below location 

 

sample 

 

Please let us know if you need further assistance on this. 

 

Regards, 

Karthik R