DropDownList - How to clear selection?

6 posts, 0 answers
  1. Dustin
    Dustin avatar
    79 posts
    Member since:
    Oct 2012

    Posted 14 Nov 2012 Link to this post

    How do you clear the selection of a dropdownlist?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 15 Nov 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Michael Rodriguez
    Michael Rodriguez avatar
    8 posts
    Member since:
    Oct 2009

    Posted 02 May 2013 Link to this post

    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.


  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 07 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Regis
    Regis avatar
    2 posts
    Member since:
    May 2013

    Posted 07 May 2013 Link to this post

    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.
  7. Kurtis
    Kurtis avatar
    3 posts
    Member since:
    Oct 2015

    Posted 24 Feb Link to this post

    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;

Back to Top
Kendo UI is VS 2017 Ready