New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Removing DropDownList Items

Environment

Product	Telerik UI for ASP.NET MVC DropDownList
Progress Telerik UI for ASP.NET MVC version	Created with the 2022.2.802 version

Description

How can I remove items from the Telerik UI for ASP.NET MVC DropDownList?

Solution

To achieve the desired scenario:

Create a button that will be responsible for removing an item in the DropDownList.
To remove an item, handle click event of the previously created button and use the .remove() configuration method of the DropDownList's DataSource.

Index.cshtml
    <button class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md" id="remove">Remove Items</button>

    @(Html.Kendo().DropDownList()
         .Name("color")
         .DataTextField("Text")
         .DataValueField("Value")
         .BindTo(new List<SelectListItem>() {
             new SelectListItem() {
                 Text = "Black",
                 Value = "1"
             },
             new SelectListItem() {
                 Text = "Orange",
                 Value = "2"
             },
             new SelectListItem() {
                 Text = "Grey",
                 Value = "3"
             }
         })
         .Value("1")
         .HtmlAttributes(new { style = "width: 100%" })
    )
Script.js
    <script>
        $("#remove").click(function() {
           var ddl =  $("#color").data("kendoDropDownList"); // Get the reference of the DropDownList. 

           var oldData = ddl.dataSource.data(); // Get the DataSource's data.

           ddl.dataSource.remove(oldData[0]); // Remove the first item.
           ddl.dataSource.remove(oldData[oldData.length - 1]); // Remove the last item.
        });
    </script>

For the complete implementation of the suggested approach, refer to the Telerik REPL example on removing Telerik UI for ASP.NET MVC DropDownList items.

Removing DropDownList Items

Environment

Description

Solution

More ASP.NET MVC DropDownList Resources

See Also