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.

nodeUnselect event

Thread ID:

Created:

Updated:

Platform:

Replies:

129807 Apr 4,2017 03:22 PM Apr 6,2017 12:52 AM JavaScript 3
loading
Tags: ejTreeView
Randy Craven
Asked On April 4, 2017 03:22 PM

Hello,

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 09:24 AM

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. 
 
[Javascript] 
 
<script id="treeTemplate" type="text/x-jsrender"> 
 
        {{if hasChild}} 
        <div class={{>cls}}>{{>name}}</div> 
        {{else}} 
        <div class="cont-list"> 
            <button class="con-img">{{>imgId}}"</button> 
            <div class="cont-details"> 
                <b>{{>name}}</b><br /> 
                <span>{{>city}}</span> 
                <br /> 
                <span>{{>phone}}</span> 
            </div> 
            <div class="treeFooter"></div> 
        </div> 
        {{/if}} 
 
    </script> 
 
$("#treeview").ejTreeView({ 
                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.  
                    $(args.currentElement.closest('li')).find('button').show(); 
                }, 
                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. 
 
Regards, 
Ashokkumar B. 


Randy Craven
Replied On April 5, 2017 02:14 PM

Hello Ashokkumar,

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

Randy Craven

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

Hi Randy, 
  
Most welcome. 
Regards, 
Ashokkumar B. 


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.

;