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. Image for the cookie policy date

Need to add a checkbox to the parent node if parent has no child nodes in it

Hi Team,


I am facing an issue with tree-view component, where I have parent and child nodes with the checkbox


i have written the code if the parent node has child nodes then checkbox should show only for child nodes (DefaultMenu.vue) using CSS property display none in style section.


Now i need the checkbox to the parent node if parent has no sub child nodes in the tree view.

For eg. in the sample tree view example i want to add a checkbox to More in music Node


Please help me to add a checkbox respectively.


Please find working sample code also attached below.
Vue Template (forked) - CodeSandbox



Regards,
Cyril Ovely.


1 Reply 1 reply marked as answer

LD LeoLavanya Dhanaraj Syncfusion Team October 12, 2022 06:08 AM

Hi Cyril,


Greetings from Syncfusion support.


We have validated your reported query in the Vue TreeView component. To meet your requirement, we have made some changes to your shared sample. Here, we have used the created event to disable the parent checkboxes that have child tree items. For your reference, we have attached the sample.


Check the below mentioned code snippets.


[DefaultMenu.vue]

<ejs-treeview id="tree" ... :showCheckBox="true" :created="onCreated" :loadOnDemand="false"></ejs-treeview>

 

methods: {

    onCreated: function (args) {

    var tObj = document.getElementById("tree").ej2_instances[0];

    var ele = tObj.element.querySelectorAll(".e-level-1");

    for (var i = 0; i < ele.length; i++) {

        if (ele[i].querySelector(".e-list-parent") != null) {

        ele[i].querySelector(".e-checkbox-wrapper").style.display = "none";

    }

}


Sample : https://codesandbox.io/s/vue-template-forked-74h6lc?file=/src/components/DefaultMenu.vue:10-18


Please check the attached sample and get back to us if you need any further assistance.


Regards,

Leo Lavanya Dhanaraj


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon