Implement Cascading with Local Data in the ComboBox
Environment
| Product | Progress® Kendo UI® ComboBox for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I cascade Kendo UI ComboBoxes when working with local data?
Solution
The following example demonstrates how to achieve the desired scenario.
category: <select id="category"></select>
product: <select id="product"></select>
<script>
var category = $("#category").kendoComboBox({
placeholder: "Select category...",
dataSource: [
{ CategoryID: 1, CategoryName: "Beverages" },
{ CategoryID: 2, CategoryName: "Condiments" },
{ CategoryID: 3, CategoryName: "Confections" }
],
dataValueField: "CategoryID",
dataTextField: "CategoryName",
filter: "contains"
}).data("kendoComboBox");
var product = $("#product").kendoComboBox({
placeholder: "Select product...",
dataSource: [
{"ProductID":1,"ProductName":"Chai","CategoryID":1},
{"ProductID":3,"ProductName":"Aniseed Syrup","CategoryID":2},
{"ProductID":4,"ProductName":"Chef Anton's Cajun Seasoning","CategoryID":2},
{"ProductID":16,"ProductName":"Pavlova","CategoryID":3},
{"ProductID":19,"ProductName":"Teatime Chocolate Biscuits","CategoryID":3}
],
dataValueField: "ProductID",
dataTextField: "ProductName",
cascadeFrom: "category",
filter: "contains"
}).data("kendoComboBox");
category.value("2");
product.value("3");
</script>