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

Implement Cascading with Local Data in the ComboBox


Product Progress® Kendo UI® ComboBox for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I cascade Kendo UI ComboBoxes when working with local data?


The following example demonstrates how to achieve the desired scenario.

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

In this article