Kendo dataSource complex filtering example

by valchev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.dataviz.min.css">
<div id="grid"></div>
<br />
<p>Filter :: [ {[ Freight = 11.61 OR Freight = 51.30 ]} AND {[ City startswith "Charleroi" ]} ]</p>
<input type="button" id="btnFilter" value="Filter" />

CSS

p {
 color: blue;   
}

JavaScript

$("#btnFilter").on("click", function(e) {
    var ds = $("#grid").data("kendoGrid").dataSource;
    ds.filter([
        {"logic":"or",
         "filters":[
             {
                "field":"Freight",
                "operator":"eq",
                "value":11.61},
             {
                 "field":"Freight",
                  "operator":"eq",
                  "value":51.3}
         ]},
        {
            "field":"ShipCity",
            "operator":"startswith",
            "value":"Char"}
    ]);
});

$("#grid").kendoGrid({
    dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
            },
            schema: {
                model: {
                    fields: {
                        OrderID: { type: "number" },
                        Freight: { type: "number" },
                        ShipName: { type: "string" },
                        OrderDate: { type: "date" },
                        ShipCity: { type: "string" }
                    }
                }
            },
            pageSize: 10,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        },
        filterable: true,
        sortable: true,
        pageable: true,
        columns: [{
                field:"OrderID",
                filterable: false
            },
            "Freight",
            {
                field: "OrderDate",
                title: "Order Date",
                width: 100,
                format: "{0:MM/dd/yyyy}"
            }, {
                field: "ShipName",
                title: "Ship Name",
                width: 200
            }, {
                field: "ShipCity",
                title: "Ship City"
            }
        ]
    });