Cascading ComboBoxes

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

To configure the cascading dependency, use the :cascade=from prop.

<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-combobox id="categories"
                    :data-source-ref="'datasource1'"
                    :filter="'contains'"
                    :data-text-field="'CategoryName'"
                    :data-value-field="'CategoryID'">
    </kendo-combobox>
    <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-combobox disabled="disabled"
                    :data-source-ref="'datasource2'"
                    :auto-bind="false"
                    :cascade-from="'categories'"
                    :filter="'contains'"
                    :data-text-field="'ProductName'"
                    :data-value-field="'ProductID'">
    </kendo-combobox>
</div>
Vue.use(DropdownsInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: "#vueapp"
})

In this article