Select only single leaf node with checkbox

[Mohammad Arfizur Rahman]

Hi, I have a dropdown-tree with 4 levels. I want to have checkboxes only on the leaf nodes. And want to select one leaf node at a time i.e. after I selecting a leaf node If selecting a new one then, the previous one will be unselected. Although I've managed to show checkboxes at the leaf level following one of your solutions, thanks to you, but couldn't manage to select only a single leaf node at a time. 

Vue:

CSS:

#teamModalOrganizationTree_tree.e-treeview .e-list-item.e-level-1 > .e-text-content .e-checkbox-wrapper,

#teamModalOrganizationTree_tree.e-treeview .e-list-item.e-level-2 > .e-text-content .e-checkbox-wrapper,

#teamModalOrganizationTree_tree.e-treeview .e-list-item.e-level-3 > .e-text-content .e-checkbox-wrapper {

        display: none

    }

[Indhumathy Loganathan]

Hi Mohammad, 

 

Greetings from Syncfusion support. 

 

We checked your requirement and prepared a Dropdown Tree sample in Vue to enable single selection while using checkbox for specific leaf nodes. You can use our select event to perform this customization. Please check the below code snippet. 

 

select: function (args) { 

  var selection = this.$refs.treeObj.$el.ej2_instances[0].text; 

  if (selection != null) { 

    this.$refs.treeObj.clear(); 

    this.$refs.treeObj.text = args.itemData.text; 

  } 

}, 

 

You can find the sample demonstrating the solution from below link. 

 

https://codesandbox.io/s/vue-drop-down-tree-8l4mt?file=/src/App.vue:1786-2019 

 

Please refer to the following links to know more about the Vue Dropdown Tree component. 

 

Documentation:  https://ej2.syncfusion.com/vue/documentation/drop-down-tree/getting-started/ 

 

Demos:  https://ej2.syncfusion.com/vue/demos/#/material/drop-down-tree/default.html 

 

API Reference:  https://ej2.syncfusion.com/vue/documentation/api/drop-down-tree/#dropdowntree 

 

Please get in touch with us if you would require any further assistance. 

 

Regards,            

Indhumathy L