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"/>              </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: 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([]);       
    });


});