Set the DropDownList DataSource Dynamically
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 dynamically set the data source of a Kendo UI DropDownList widget?
Solution
The following example demonstrates how to achieve the desired scenario.
<div id="example">
<div class="demo-section k-header">
<h4>View Order Details</h4>
<p>
<label for="categories">Categories:</label><input id="categories" style="width: 270px" />
</p>
<p>
<label for="products">Products:</label><input id="products" disabled="disabled" style="width: 270px" />
</p>
<p>
<label for="orders">Orders:</label><input id="orders" disabled="disabled" style="width: 270px" />
</p>
<button class="k-button" id="set">Set DataSource</button>
</div>
<style scoped>
.demo-section {
width: 400px;
}
.demo-section p {
margin-top: 1em;
}
.demo-section label {
display: inline-block;
width: 100px;
padding-right: 5px;
text-align: right;
}
.demo-section .k-button {
margin: 1em 0 0 105px;
}
.k-readonly
{
color: gray;
}
</style>
<script>
$(document).ready(function() {
var categories = $("#categories").kendoDropDownList({
optionLabel: "Select category...",
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
}
}).data("kendoDropDownList");
var products = $("#products").kendoDropDownList({
autoBind: false,
cascadeFrom: "categories",
optionLabel: "Select product...",
dataTextField: "ProductName",
dataValueField: "ProductID",
}).data("kendoDropDownList");
var orders = $("#orders").kendoDropDownList({
autoBind: false,
cascadeFrom: "products",
optionLabel: "Select order...",
dataTextField: "Order.ShipCity",
dataValueField: "OrderID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Order_Details?$expand=Order"
}
}
}).data("kendoDropDownList");
$("#set").click(function() {
products.setDataSource({
type: "odata",
serverFiltering: true,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
}
});
});
});
</script>
</div>