Cascading MultiSelects

Cascading MultiSelects - this is a just concept, which shows how to build array of filters.

by krustev

HTML

<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.default.min.css">
supplier: <select id="suppliers"></select>
product: <select id="products"></select>

JavaScript

var productsDataSource = new kendo.data.DataSource({
    type: "odata",
    serverFiltering: true,
    transport: {
        read: {
            url: "http://demos.kendoui.com/service/Northwind.svc/Products",
        }
    }
});

$("#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: "http://demos.kendoui.com/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 filters;
}