Kendo dataSource complex filtering example

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<input type="button" id="tblbtn1" value="Clear Filter" onclick="clearFiter()">
 <div id="grid"></div>
<div id="loading-msg">Please wait while loading</div>

JavaScript

$("#loading-msg").kendoWindow({
    modal: true,
    visible: false
}); 
        function clearFiter() {
             $("#loading-msg").data("kendoWindow").center().open();
              $("#grid").data("kendoGrid").dataSource.filter([]);
             $("#loading-msg").data("kendoWindow").close();
            
            }

$("#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"
            }
        ]
    });