Cascading MultiColumnComboBoxes
The cascading MultiColumnComboBox is a series of two or more MultiColumnComboBoxes in which each MultiColumnComboBox is filtered according to the selected options in the previous MultiColumnComboBox.
<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-multicolumncombobox id="categories"
:filter="'contains'"
:data-text-field="'CategoryName'"
:data-value-field="'CategoryID'"
:data-source-ref="'datasource1'"
style="width:300px">
<kendo-multicolumncombobox-column :field="'CategoryName'" :title="'Name'">
</kendo-multicolumncombobox-column>
<kendo-multicolumncombobox-column :field="'CategoryID'" :title="'ID'" :width="70">
</kendo-multicolumncombobox-column>
</kendo-multicolumncombobox>
<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-multicolumncombobox disabled="disabled"
:auto-bind="false"
:cascade-from="'categories'"
:filter="'contains'"
:data-text-field="'ProductName'"
:data-value-field="'ProductID'"
:data-source-ref="'datasource2'"
style="width:300px">
<kendo-multicolumncombobox-column :field="'ProductName'" :title="'Name'">
</kendo-multicolumncombobox-column>
<kendo-multicolumncombobox-column :field="'ProductID'" :title="'ID'" :width="70">
</kendo-multicolumncombobox-column>
</kendo-multicolumncombobox>
</div>Vue.use(DropdownsInstaller);
Vue.use(DataSourceInstaller);
new Vue({
el: "#vueapp",
data: function() {
return {}
}
})