DropDownList - How to clear selection?

9 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
    2617 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. 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.


  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2617 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!
  5. 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.
  6. Kurtis
    Kurtis avatar
    3 posts
    Member since:
    Oct 2015

    Posted 24 Feb 2016 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;

  7. Gerry
    Gerry avatar
    12 posts
    Member since:
    May 2017

    Posted 18 May Link to this post

    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?
  8. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1117 posts

    Posted 23 May Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Gerry
    Gerry avatar
    12 posts
    Member since:
    May 2017

    Posted 23 May in reply to Ivan Danchev Link to this post

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