Cascade MultiSelects from DropDownLists
Environment
| Product | Progress® Kendo UI® MultiSelect for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I cascade the Kendo UI MultiSelect from a Kendo UI DropDownList?
Solution
The following example demonstrates how to achieve the desired scenario.
<div>
supplier: <select id="suppliers"></select>
</div>
<div>
product: <select id="products"></select>
</div>
<script>
$(function() {
var productsDataSource = new kendo.data.DataSource({
type: "odata",
serverFiltering: true,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
}
}
});
$("#products").kendoMultiSelect({
autoBind: false,
dataTextField: "ProductName",
dataValueField: "ProductID",
dataSource: productsDataSource
});
$("#suppliers").kendoDropDownList({
optionLabel: "Select supplier",
dataTextField: "CompanyName",
dataValueField: "SupplierID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Suppliers"
}
}
},
change: function() {
var filters = buildFilters([this.dataItem()]);
productsDataSource.filter(filters);
}
});
function buildFilters(dataItems) {
var filters = [];
var length = dataItems.length;
var supplierID;
var idx = 0;
for (; idx < length; idx++) {
supplierID = parseInt(dataItems[idx].SupplierID);
if (!isNaN(supplierID)) {
filters.push({
field: "SupplierID",
operator: "eq",
value: supplierID
});
}
}
return filters;
}
});
</script>