How to clear multi drop down list when i click on button click?

[chaitanya]

HI,

How to clear Multi Drop Down list on button click (Ex: Reset Button).

Thanks and Regards,

Chaitanya

[Harikrishnan P]

Hi Chaitanya,

Thanks for using Syncfusion products.

Query: How to clear Multi Drop Down list on button click (Ex: Reset Button).

We can use the public method “clearText()” to clear the values in Dropdownlist. To access this public method we need to use the object of dropdownlist. Please refer the below code,

        function clearValue(e) {

            //Object for Dropdownlist is created

            var target = $('#skillsets').data("ejDropDownList");

            //clearText method is called to clear the values in Dropdownlist

            target.clearText();

        }

You can refer the following common user guide for JavaScript to know more about getting started with our components. Under each components we have provided “Concepts and features” section which explains about the features of the particular component.

http://help.syncfusion.com/web

You can also refer the following class reference link for JavaScript, which showcases all the properties, methods and events supported by each component.

http://help.syncfusion.com/cr/js

Please let us know if you have further queries.

Regards,

HariKrishnan

[adjie]

Hi Im using your library Angular Syncfusion, i've same case when make a reset button on multiselect is there any guide to use clear all selected function to button. i think thats my question, thanks btw

[Ashokkumar Balasubramanian]

Hi Adjie,  

 

Good day to you. 

 

We have prepared a sample in Angular for clearing selected items in DropDownList using clearText() method through button click.  Please refer to the following code 

 

HTML: 

<h3>DropDownList</h3> 

<input id="dropdown1" #drop ej-dropdownlist [dataSource]="data" [fields]="fields" [showCheckbox]="true" /> 

<br /> 

<button (click)="onClick($event)" type="button">Reset</button> 

 

TS: 

export class AppComponent { 

                @ViewChild("drop") ddlObj:EJComponents<ej.DropDownList, any>; 

                data: Array<Object> = []; 

                fields: Object; 

                constructor() { 

                this.data = [ 

                    {text: "ListItem 1", value: "ListItem 1" }, 

                    {text: "ListItem 2", value: "ListItem 2" }, 

                    {text: "ListItem 3", value: "ListItem 3" }, 

                    {text: "ListItem 4", value: "ListItem 4" }, 

                    {text: "ListItem 5", value: "ListItem 5" }, 

 

                  ]; 

              this.fields = { dataSource: this.data, text: "text", value: "value" }; 

                 } 

             onClick(event) 

                 { 

                      this.ddlObj.widget.clearText(); 

                 } 

} 

 

Sample: https://www.syncfusion.com/downloads/support/forum/118442/ze/DDL_clear_text-1193677950  

 

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

 

Regards, 

Ashokkumar B. 

[Ajay Gohil]

Set on button click event 

$("#skillsets").val('');

or 

$("#skillsets").prop('selectedIndex', -1);

[Ashokkumar Balasubramanian]

Hi Adjie, 

  

We suggested a direct method (cleartext) for clearing selected values in Drop Down List component. If you need to achieve this through property, then you can set empty value via Drop Down List instance as shown below 

 

onClick(event) 

    { 

        this.ddlObj.widget.option("value", ""); 

    } 

 

Could you please check code block and let us know, if you require any further assistance on this? 

 

Regards, 

Ashokkumar B.