New to Kendo UI for jQuery? Download free 30-day trial

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>

    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"

    var product = $("#product").kendoComboBox({
        placeholder: "Select product...",
        dataSource: [
            {"ProductID":3,"ProductName":"Aniseed Syrup","CategoryID":2},
            {"ProductID":4,"ProductName":"Chef Anton's Cajun Seasoning","CategoryID":2},
            {"ProductID":19,"ProductName":"Teatime Chocolate Biscuits","CategoryID":3}              
        dataValueField: "ProductID",
        dataTextField: "ProductName",
        cascadeFrom: "category",
        filter: "contains"


See Also

For more runnable examples on the Kendo UI ComboBox, check its how-to articles.

In this article
Not finding the help you need? Improve this article