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

[Cyril Ovely]

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.

[LeoLavanya Dhanaraj]

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