Remove DropDownList Items
Environment
| Product | Progress® Kendo UI® DropDownList for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I remove items from a Kendo UI DropDownList?
Solution
The following example demonstrates how to achieve the desired scenario.
<input id="color" />
<button class="k-button" id="remove">Remove items</button>
<script>
$(document).ready(function() {
var data = [
{ text: "Black", value: "1" },
{ text: "Orange", value: "2" },
{ text: "Grey", value: "3" }
];
// create DropDownList from input HTML element
$("#color").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: data
});
$("#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
});
});
</script>