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.
