External DataSource KendoUI

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 selecteditem = $('#category').val();
        var kgrid = $("#grid").data("kendoGrid");
        selecteditem = selecteditem.toUpperCase();
        var selectedArray = selecteditem.split(" ");
        if (selecteditem) {
            //kgrid.dataSource.filter({ field: "UserName", operator: "eq", value: selecteditem });
            var orfilter = { logic: "or", filters: [] };
            var andfilter = { logic: "and", filters: [] };
            $.each(selectedArray, function (i, v) {
                if (v.trim() == "") {
                }
                else {
                    $.each(selectedArray, function (i, v1) {
                        if (v1.trim() ==...