Kendo

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div id="grid"></div>

<script type="text/x-kendo-template" id="template">
    <div class="toolbar">
        <input type="search" id="ProductIDSearchBox"></input>
        <input type="search" id="ProductNameSearchDD"></input>
        <input type="search" id="UnitPriceSearchBox"></input>
    </div>
</script>

JavaScript

var grid = $("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Products"
        },
        pageSize: 15,
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true
    },
    toolbar: [
    {
        template: $("#template").html()
    }],
    height: 450,
    sortable: true,
    pageable: true,
    filterable: false,
    columns: ["ProductID", "ProductName", "UnitPrice"]
});


var dropDown = grid.find("#ProductNameSearchDD").kendoDropDownList({
    dataTextField: "ProductName",
    dataValueField: "ProductID",
    autoBind: false,
    optionLabel: "All",
    dataSource: {
        type: "odata",
        severFiltering: true,
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Products"
        }
    },
    change: function() {
        var value = this.value();
        if (value) {
            grid.data("kendoGrid").dataSource.filter({
                field: "ProductID",
                operator: "eq",
                value: parseInt(value)
            });
        } else {
            grid.data("kendoGrid").dataSource.filter({});
        }
    }
});