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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

150417 Jan 6,2020 04:33 PM UTC Jan 10,2020 06:28 AM UTC Vue 5
loading
Tags: DropDownList
kevindev
Asked On January 6, 2020 04:33 PM UTC

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 [Syncfusion]
Replied On January 7, 2020 12:52 PM UTC

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
Replied On January 7, 2020 02:12 PM UTC

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 [Syncfusion]
Replied On January 8, 2020 02:03 PM UTC

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
Replied On January 9, 2020 10:51 AM UTC

Perfect, this works. Thank you for the information.

Sureshkumar P [Syncfusion]
Replied On January 10, 2020 06:28 AM UTC

Hi kevin, 
 
 
Regards, 
Sureshkumar P 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon