We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Cannot unselect node in TreeView

Thread ID:

Created:

Updated:

Platform:

Replies:

128874 Feb 13,2017 04:04 PM Feb 16,2017 10:00 AM ReactJS 6
loading
Tags: TreeView
Christopher Hui
Asked On February 13, 2017 04:04 PM

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 [Syncfusion]
Replied On February 14, 2017 09:05 AM

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
Replied On February 14, 2017 12:50 PM

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 [Syncfusion]
Replied On February 15, 2017 07:25 AM

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 
 
 
Please let us know if you need further assistance on this. 
 
 
Regards, 
Karthik R 


Christopher Hui
Replied On February 15, 2017 06:45 PM

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
Replied On February 15, 2017 07:09 PM

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 [Syncfusion]
Replied On February 16, 2017 10:00 AM

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 
 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Karthik R 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;