DropDown single selection mode deselect value

[Milos]

I have ejDropDownList which dynamically get datasource. After value selection ones, I do not know how to deselect value.

Is there any way to deselect value in control, or I need to add some empty object in my datasource on the beginning which will simulate empty value/deselection.

For example, multiple selection mode has 'x'  on the right side of every selected value, is there anything similar in single selection mode ?

[Prince Oliver]

Hi Milos,   

  

Thanks for contacting Syncfusion Support.   

  

Query 1: Is there any way to deselect value in control, or I need to add some empty object in my datasource on the beginning which will simulate empty value/deselection.   

  

In order to deselect a selected item in single selection dropdownlist, you can set the selectedIndex to -1. You can make use of the header template to add a header text to unselect item on click event. Have a look at the following code snippet.   

  

$('#dropdown1').ejDropDownList({   

                     dataSource: skillset,   

                fields: { text: "skill" },   

                headerTemplate: "<div class='temp' id='unselect' >Unselect Item</div>"   

            });   

             

           $("#unselect").on("click", function() {   

                var obj = $("#dropdown1").data("ejDropDownList");   

              obj.setModel({ selectedIndex : -1 });   

            });   

  

  

Please refer to the Playground sample: http://jsplayground.syncfusion.com/hooqecal   

  

Query 2: For example, multiple selection mode has 'x'  on the right side of every selected value, is there anything similar in single selection mode?   

  

The Close icon ‘x‘ at the right side for selected value is exclusive for multiple selection mode and it is not available for single selection mode.   

  

Regards,   

Prince  

[Milos]

Hi Prince,

Thank you for your answer.

It works also with 

obj.selectItemsByIndices("-1"); 

or  

obj.selectItemByValue(null); 

insteads of 

obj.setModel({ selectedIndex : -1 }); 

It is a bit more job for some simple functionality. I think it should be feature like all others, (for example readonly: true/false), this feature can be: useDeselectValue: true/false.

In other way when I deselect value, in this way, dropdown does not trigger event "change". I have a lot of work connected with this event. 

Regards,

Milos

[Prince Oliver]

Hi Milos,      

  

Thanks for your update.   

  

Query 1: It is a bit more job for some simple functionality. I think it should be feature like all others, (for example readonly: true/false), this feature can be: useDeselectValue: true/false.   

  

Thank you for your interest. We will consider it in one of our future updates.   

  

Query 2: In other way when I deselect value, in this way, dropdown does not trigger event "change". I have a lot of work connected with this event.   

  

After you have deselected the value, you can trigger the change event. Have a look at the following code snippet.   

  

$("#unselect").on("click", function() {   

                var obj = $("#dropdown1").data("ejDropDownList");   

              obj.setModel({ selectedIndex : -1 });   

              obj._trigger("change",obj);   

            });   

  

  

Please refer to the following playground sample:   

http://jsplayground.syncfusion.com/0l1yzhgx   

   

Regards,   

Prince  

[Milos]

Hi Prince,

Thank you for your support.

Problem is solved :).

Have a nice day,

Milos

[Prince Oliver]

Hi Milos,   

  

Most welcome.  

  

We are glad to hear that issue has been fixed.  

Please let us know if you need further assistance on this.   

  

Regards,   

Prince