External DataSource KendoUI

by nlarkin

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.2.804/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.2.804/styles/kendo.kendo.min.css">
<script src="http://cdn.kendostatic.com/2011.2.804/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>

JavaScript

$(document).ready(function() {

    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
        },
        height: 450,
        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() {
        $("#grid").data("kendoGrid").dataSource.filter({
            field: "ProductName",
            operator: "contains",
            value: $('#category').val()
        });


    });

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


    });
    
    
    //Or LOGIC HERE... DOESNT WORK
    $('#reset1').click(function()  {
    $("#grid").data("kendoGrid").dataSource.filter({
    logic: "or",
    filters: [
        {field: "ProductName", operator: "ne", value: "fee"},
{field: "ProductName", operator: "ne", value: "fi"}
    ]
});


   

});
});