Implement Cascading with Local Data
The following example demonstrates how to cascade Kendo UI ComboBoxes when working with local data.
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>
See Also
- ComboBox JavaScript API Reference
- How to Bypass Boundary Detection
- How to Configure Deferred Value Binding
- How to Expand ComboBox Located in Bootstrap Layout
- How to Implement Cascading with Local Data
- How to Make Visible Input Readonly
- How to Open ComboBox When onFocus is Triggered
- How to Prevent Adding Custom Values
- How to Select Items on Tab
- How to Underline Matched Search
For more runnable examples on the Kendo UI ComboBox, check its how-to articles.