Remove dropdown option from Kendo dropdownlist using jquery

5 posts, 0 answers
  1. Richard
    Richard avatar
    3 posts
    Member since:
    Jun 2016

    Posted 16 Sep Link to this post

    I have tried and tried and searched the internet trying to figure this out but still haven't found an exact answer.  Removing an item from a standard issued select dropdown is pretty easy,  the code is:    $("#dropdownlistID option[value='optiontoremove']").remove();

    How do i do this with Kendo Dropdownlist,    something along the lines of $("#dropdownlistID").data("kendoDropDownList").whateverhere.remove

     

    Thanks to whoever can help me solve this.

  2. Patrick
    Admin
    Patrick avatar
    174 posts

    Posted 16 Sep Link to this post

    Hi Richard,

    We have a great demo in our documentation that illustrates how to remove items from a Kendo UI DropDownList.  When the click event occurs from the remove button, the first and last items in the list are taken out.  
    $("#remove").click(function() {
              var ddl =  $("#color").data("kendoDropDownList");
     
              var oldData = ddl.dataSource.data();
     
              ddl.dataSource.remove(oldData[0]); //remove first item
              ddl.dataSource.remove(oldData[oldData.length - 1]); //remove last item
            });

    I hope this example helps!

    Regards,
    Patrick
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Richard
    Richard avatar
    3 posts
    Member since:
    Jun 2016

    Posted 16 Sep Link to this post

    Thanks for your reply, but this doesn't really help what i'm trying to do.   I'm not trying to remove a certain index, or the first or last item,  i'm trying to remove an item that has a certain value.   For instance,  lets say you havea Kendo DropdownList, something like

    <select>
     <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
      <option value="cruiser">Cruiser</option>
      <option value="blah">blah</option>
      <option value="blah2">blah2</option>
    </select>

     

    How do you select and remove the item with value, say, "cruiser"?    Without having to access it by index,  cause the order could change
     

  5. Richard
    Richard avatar
    3 posts
    Member since:
    Jun 2016

    Posted 16 Sep in reply to Patrick Link to this post

    Thanks for your reply, but this doesn't really help what i'm trying to do.   I'm not trying to remove a certain index, or the first or last item,  i'm trying to remove an item that has a certain value.   For instance,  lets say you havea Kendo DropdownList, something like

    select
      option value="volvo"  Volvo
      option value="saab"  Saab
      option value="mercedes"  Mercedes
      option value="audi"  Audi 
      option value="cruiser"  Cruiser
      option value="blah"  blah
      option value="blah2"  blah2
    select

     

    How do you select and remove the item with value, say, "cruiser"?    Without having to access it by index,  cause the order could change
     

  6. Patrick
    Admin
    Patrick avatar
    174 posts

    Posted 19 Sep Link to this post

    Hello Richard,

    In order to find the value of an item and remove it from the dataSource, iterate over the data and search for the value using a conditional.  Here is a Kendo UI Dojo by Progress which illustrates this approach.  

    I hope this helps!

    Regards,
    Patrick
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready