DropDownList - How to clear selection?

[Dustin]

How do you clear the selection of a dropdownlist?

[Iliana Dyankova]

Hello Dustin,

You could achieve the desired functionality using the value() method of the DropDownList and pass an empty string as parameter to such method. For your convenience I prepared a simple jsBin example which illustrates a possible implementation. 
 
Kind regards,
Iliana Nikolova
the Telerik team

[Michael Rodriguez]

Setting .value("") or .text("") does NOT really clear the selection, it just clears the UI and selects the first item in the list.

I have tried:

$("#itemgroupid").data("kendoDropDownList").text("");
$("#itemgroupid").data("kendoDropDownList").value("");
$("#itemgroupid").data("kendoDropDownList").select("");
$("#itemgroupid").data("kendoDropDownList").text(null);
 $("#itemgroupid").data("kendoDropDownList").value(null);
 $("#itemgroupid").data("kendoDropDownList").select(null);
 $("#itemgroupid").data("kendoDropDownList").text(undefined);
 $("#itemgroupid").data("kendoDropDownList").value(undefined);
 $("#itemgroupid").data("kendoDropDownList").select(undefined);
 $("#itemgroupid").data("kendoDropDownList").select(-1);

When I then look at the value, it is still set:
$("#itemgroupid").data("kendoDropDownList").value();
And
$("#itemgroupid").data("kendoDropDownList").select();
is 0 which is the first item in the list.

I can achieve what I want by putting an option label in the list, so that it is the first item selected and then clearing the text so that it "appears" that nothing is selected, but this is not optimal.

[Iliana Dyankova]

Hi Michael,

If I understand you correctly you would like to have "unselected" state in Kendo UI DropDownList? If this is the case I am afraid it is not supported - Kendo UI DropDownList widget is designed to always have a selected item. Also you may consider using Kendo UI ComboBox which allows to not have a selected item.

Kind regards,
Iliana Nikolova
the Telerik team

[Regis]

Michael,

I know that answers are very disapointing, sometimes, "dunno... uservoice... blabla."

This is how you create a dropdown without a value:

http://jsbin.com/anudaj/33/edit

var data = [
    {text: "12 Angry Men", value:"1"},
    {text: "Il buono, il brutto, il cattivo.", value:"2"},
    {text: "Inception", value:"3"}
];
//data = [];
 var dropdownlist = $("#products").kendoDropDownList({
   dataTextField: "text",
   dataValueField: "value"
 }).data().kendoDropDownList;

dropdownlist.dataSource.data(data);

  $("#clear").click(function() {

    dropdownlist.text("");
    console.log(dropdownlist.value());
  });

Basically, you need set the data after the control is up. That way the control do not mess around with the selection and you get your value as ''.

Please kendo people do not change that behavior, otherwise it will break the solution.
If you do not pass a dropdown dataSource on the initialization you can clear the dropdown as well with:

dropdownlist.dataSource.data([]);

Cheers.

[Kurtis]

I got the desired effect by changing the OLD index back to 0, so i could still get events registered.

 

            var dropdownlist = $("#HolidayDropDownList").data("kendoDropDownList");
            dropdownlist.text(dropdownlist.options.optionLabel);
            dropdownlist.element.val(-1);
            dropdownlist.selectedIndex = -1;
            dropdownlist._oldIndex = 0;

[Gerry]

It seems like there must be a single line of code that can set or clear the selected value (by index)... or does the API need updating?

[Ivan Danchev]

Hello,

As Iliana mentioned earlier in this thread, the DropDownList is designed to always have a selected value. You can however call the value method passing "-1", which will clear the selected value. Dojo example. 

Regards,
Ivan Danchev
Telerik by Progress

[Gerry]

Yes I eventually found the -1, thanks for updating this thread!

[jeff]

This is an invalid answer if you are not using primitive values.

1. If there is always a "selected value", then what is the value of the dropdown after it is initialized with an optionLabel  config option, and before the user selects anything else? Why can't I reset the dropdown back to this value?

2. If I am not using primitive values, your solution to set the value to null or -1 doesn't seem to work since I'm guessing, those values are primitives. Is this a correct understanding?

3. At one point in the thread above, the property 'placeholder' is mentioned, but this property is not in the documentation. Is this property deprecated?

In my problem, I am using MVVM to bind the kendo dropdown to my select. I am also using the value binding to bind the value of the dropdown to a variable so that I can trigger UI stuff once the user makes a selection. I'd like to eventually 'reset' everything once I handle the selection, but how is that possible if I can't set anything to null? Yes I can visually reset the dropdown, but the value binded variable never resets. How do I reset the dropdown, and its value binding, to its original state? See: https://stackoverflow.com/questions/50163120/reset-an-onservable-to-null-when-using-a-value-binding-on-a-kendo-ui-dropdownlis

 

Yes, I know I am introducing a new issue to this old thread, however, I am mostly concerned with the 3 questions above, which is absolutely relevant to this post, as it appears the admin's responses are incomplete or invalid.

 

How do I reset a dropdown list to its original state?

[Joana]

Hi Jeff,

I will go straight to the questions:

1) DropDownList creates a fake object in terms of the optionLabel with properties based on the dataTextField and dataValueField. What is behind the words "has always selected value"  is that the DropDownList will automatically select the first option if none predefined regardless of whether it is an optionLabel or a dataItem which is basically how pure select html element behaves. 

2) Correct. Most of the bound widgets are configured to use primitive values and that's why the suggested approaches for clearing value include null, undefined, -1.  However, to be on the same page on the issue - programmatic deselection of item via the DropDownList API will not update the field in the View-Model. I have prepared a dojo sample which we could use for discussion:

https://dojo.telerik.com/AGikImop

The example shows a simple dropdownlist bound to remote service in MVVM scenario. There are two buttons to set the value to null and to set the value to initial selection. What is the data type of the value in your project? Note that the dojo uses data-value-primitive option set to false. It simply leaves the View-Model field to be updated with the dataItem of the selected option. 


3) For the DropDownList widget optionLabel property refers to a placeholder. PlaceHolder property could be found in our Combobox widget but both optionLabel and placeholder refer to the same functionality.

I am sorry to hear that the the responses in this thread have not been useful to you. You could open a support thread with the specific scenario, so that we could examine the code and provide possible approaches and more detailed explanation on the matter. 

I hope that the above information will make sense and I am looking forward to hearing from you.

Regards,
Joana
Progress Telerik