Create Cascading MultiSelects
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 multiple Kendo UI MultiSelect widgets?
Solution
The following example demonstrates how to achieve the desired scenario.
supplier: <select id="suppliers"></select>
product: <select id="products"></select>
<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",
},
parameterMap: function(data) {
return kendo.data.transports.odata.parameterMap.call(this, data);
}
}
});
$("#products").kendoMultiSelect({
autoBind: false,
dataTextField: "ProductName",
dataValueField: "ProductID",
dataSource: productsDataSource
});
$("#suppliers").kendoMultiSelect({
autoBind: false,
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.dataItems());
productsDataSource .filter(filters);
}
});
function buildFilters(dataItems) {
var filters = [],
length = dataItems.length,
idx = 0, dataItem;
for (; idx < length; idx++) {
dataItem = dataItems[idx];
filters.push({
field: "SupplierID",
operator: "eq",
value: parseInt(dataItem.SupplierID)
});
}
return {
logic: "or",
filters: filters
};
}
});
</script>