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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

nodeUnselect event

Thread ID:





129807 Apr 4,2017 07:22 PM UTC Apr 6,2017 04:52 AM UTC JavaScript 3
Tags: ejTreeView
Randy Craven
Asked On April 4, 2017 07:22 PM UTC


I would like to change the appearance of the currently selected treeview node by showing a button in the template.  Nodes are selected by clicking.  AllowMultiSelect is turned off.

When a node is no longer the selected node I would like to hide the button.  I am attempting to handle the nodeUnselect event but it doesn't appear to fire when another node is clicked.

Is there a way to handle this event, or is there a different way to determine when a node is no longer the selected node?

Thank you,
Randy Craven

Ashokkumar Balasubramanian [Syncfusion]
Replied On April 5, 2017 01:24 PM UTC

Hi Randy, 
In our TreeView component unselect event was triggered when enable the allowMultiSelection property, otherwise unselect event was not triggered. So you can achieve your requirement (“Selected node only show the button, other nodes are hide it”) with select event. Please find the below code snippet. 
<script id="treeTemplate" type="text/x-jsrender"> 
        {{if hasChild}} 
        <div class={{>cls}}>{{>name}}</div> 
        <div class="cont-list"> 
            <button class="con-img">{{>imgId}}"</button> 
            <div class="cont-details"> 
                <b>{{>name}}</b><br /> 
                <br /> 
            <div class="treeFooter"></div> 
                fields: { 
                    dataSource: treeData, 
                    id: "id", parentId: "pid", text: "name", hasChild: "hasChild" 
                template: "#treeTemplate", 
                 nodeSelect: function (args) { 
                  // Hide the all buttons inside the tree view  
                   this.element.find('li .con-img').hide(); 
                  // Show the corresponding button for the selected item.  
                ready: function (args) { 
                    this.element.find('li .con-img').hide(); 
For your convenience we have prepared simple sample, please check the sample in below playground location. 
Please let us know, if you have any other concerns. 
Ashokkumar B. 

Randy Craven
Replied On April 5, 2017 06:14 PM UTC

Hello Ashokkumar,

With this information I was able to solve my problem.  Thank you.

Randy Craven

Ashokkumar Balasubramanian [Syncfusion]
Replied On April 6, 2017 04:52 AM UTC

Hi Randy, 
Most welcome. 
Ashokkumar B. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon