External DataSource KendoUI

KendoGrid Search Filter

by Muhammad Mushtaq Sheikh

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<div id="example" class="k-content">
    <div id="grid"></div>
    <div class="toolbar">
        <label class="category-label" for="category">Show products by category:</label>
        <input type="search" id="category" style="width: 230px"/>
        <input id="reset" type="button" value="Reset"/>
        <input id="reset1" type="button" value="ORLOGIC"/>
    </div>
</div>

JavaScript

$(document).ready(function () {

    var grid = $("#grid").kendoGrid({
        dataSource: {
            type           : "odata",
            transport      : {
                read: "http://demos.kendoui.com/service/Northwind.svc/Products"
            },
            pageSize       : 7,
            serverPaging   : true,
            serverSorting  : true,
            serverFiltering: true
        },
        sortable  : true,
        pageable  : true,
        columns   : [
            {
                field: "ProductID",
                width: 100},
            {
                field: "ProductName",
                title: "Product Name"},
            {
                field: "UnitPrice",
                title: "Unit Price",
                width: 100},
            {
                field: "QuantityPerUnit",
                title: "Quantity Per Unit"}
        ]
    });

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

// AutoComplete
    $("#category").kendoAutoComplete({
        dataTextField : "ProductName",
        dataValueField: "ProductName",
        dataSource    : PlainDS
    });

//change event
    $("#category").keyup(function () {
        var val = $('#category').val();
        $("#grid").data("kendoGrid").dataSource.filter({
            logic  : "or",
            filters: [
                {
                    field   : "ProductName",
                    operator: "contains",
                    value   : val
                },
                {
                    field   : "QuantityPerUnit",
                    operator: "contains",
                    value   : val
                }
            ]
        });


    });

    $('#reset').click(function () {
        //not working yet
        $('#category').val('');
        $("#grid").data("kendoGrid").dataSource.filter([]);
    });

//Or LOGIC...