DropdownTree all values selected by default

[Marko Tomljanovic]

Hello,

could you please assist with the Dropdown Tree component with vue 3?

I would like to that all values be selected by default.

I have tried setting the field 'selected' in the fields object but the component does not render as selected.

When I click on the component it will expand with all option selected, but I would like that it renders as if all elements were selected on initial page load.

Kind regards

[SureshRajan Alagarsamy]

Hi Marko,

We have reviewed your query and understand that you are encountering issue with “selected” field in the Dropdown Tree component. We have prepared a Vue3-Dropdown Tree sample and set the selected field value as true for all the nodes. Upon rendering the same, the selected nodes are correctly displayed in the input element, and the element selection works as expected.

We have attached a tested sample for your reference.

Sample : Attached as zip folder.

If the issue still persists, we suggest you to share the below requested details with us.

1. The complete code snippet related to the Dropdown Tree component in your implementation.
2. Details about the data source you are using—whether it is self-referential, hierarchical, or remote data.

These details will us to validate the query further and provide you with a prompt solution.

Regards,
Suresh.

Attachment: Vue3DropdownTree_7d88e6ec.zip

[Marko Tomljanovic]

Hi,

thank you for the reply. Although yours code behaves as described, when I apply the same properties my component still does not render as all selected. Only after clicking on it it will expand and show that all elements are selected.

Please see attached image.

In API documentation method selectAll is described as possible solution.

Could you please produce an example?

Kind regards

[Muthukrishnan Kandasamy]

Hi Marko,

Based on your screenshot, we confirmed that you are using custom template for showing the selected items. Same we have added in the sample it is working fine with selected field.

Yes, we can use the selectAll method to select/unselect all items dynamically.

https://ej2.syncfusion.com/vue/documentation/api/drop-down-tree#selectall

Refer to the below code snippet,

const ddtree = ref(null);

 

const onCreated = () => {

    ddtree.value.selectAll(true);

};

 

</script>

 

<template>

  <ejs-dropdowntree ref="ddtree" id='dropdowntree' mode='Custom' :created="onCreated" :customTemplate='customTemplate' :fields='fields' :allowMultiSelection='true' :showCheckBox='true' :showSelectAll='true'></ejs-dropdowntree>

</template>

 

We have prepared the sample application for your convenience, find the sample in below attachment.

Regards,

Muthukrishnan K

Attachment: DDTreeSelectAll_94338b7f.zip

[Marko Tomljanovic]

Thank you for the help

[Kalpana Ganesan]

Hi Marko,

You're welcome! Glad that the provided solution was helpful. If you have any other questions, please reach out to us, we will be happy to help you.

Regards,

Kalpana.