VUE JS - How to programatically clear the current selection of a dropdown widget

[kevindev]

Hi 

I can see a ClearSelection() method in the React API, but not in the Vue version - can you please advise how I can clear down a dropbox so the current user selection is removed.

thank you

Kevin

[Sureshkumar P]

Hi kevin, 

 

Greetings from Syncfusion support. 

 

Yes, we can clear the value by using our inbuild public clear method.  

 

Kindly refer the below code example. 

<ejs-dropdownlist id='dropdownlist' ref='dropdownobj'></ejs-dropdownlist> 

 

Method calling : 

this.$refs.dropdownobj.ej2Instances.clear();  

 

Also, we have showClearButton option to clear the selected value. To know more about the showClearButton property please refer the documentation link: https://ej2.syncfusion.com/vue/documentation/api/drop-down-list#showclearbutton  

 

Regards, 

Sureshkumar P 

[kevindev]

Thank you, this does clear the selected value, but has a side effect: I am tracking changes to the list using the :change parameter in the js-dropdownlist component to define a function to call when a change occurs. I then want to carry out an action and clear the value within this call. The side effect of clearing the value is that it seems to then refire the change function!

Is there a way round this?

[Sevvandhi Nagulan]

Hi Kevin 

We would like to inform that when you clear the selected value, then the change event will be triggered. We cannot able to restrict the change event. However, you can restrict the change event code using the args. While clearing the value args.item and args.itemData both will be null. So based on the value you can perform action. 

Regards, 

Sevvandhi N 

[kevindev]

Perfect, this works. Thank you for the information.

[Sureshkumar P]

Hi kevin, 

 

Thanks for your update. Please get back to us if you need further assistance on this 

 

Regards, 

Sureshkumar P