All Components

Cascading DropDownList

The cascading DropDownList is a series of two or more DropDownList in which each DropDownList is filtered according to the selected options in the previous DropDownList.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource1"
                        :type="'odata'"
                        :server-filtering="true"
                        :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories'">
    </kendo-datasource>
    <kendo-dropdownlist id="categories"
                        :data-source-ref="'datasource1'"
                        :data-text-field="'CategoryName'"
                        :data-value-field="'CategoryID'"
                        :option-label="'Select category...'">
    </kendo-dropdownlist>
    <br/>
    <br/>
    <kendo-datasource ref="datasource2"
                        :type="'odata'"
                        :server-filtering="true"
                        :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products'">
    </kendo-datasource>
    <kendo-dropdownlist disabled="disabled"
                        :data-source-ref="'datasource2'"
                        :auto-bind="false"
                        :cascade-from="'categories'"
                        :data-text-field="'ProductName'"
                        :data-value-field="'ProductID'"
                        :option-label="'Select product...'">
    </kendo-dropdownlist>
</div>
Vue.use(DropdownsInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {}
    }
})
In this article