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
buttonthat will be responsible for removing an item in the DropDownList. - To remove an item, handle
clickevent of the previously created button and use the.remove()configuration method of the DropDownList's DataSource.
<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>
$("#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.