kendo custom transport

by valchev

HTML

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

JavaScript

function getData(count) {
    var data = [];
    for (var i = 1; i < count + 1; i++) {
        data.push({foo: i, bar: i});
    }
    return data;
}

var dataSource = new kendo.data.DataSource({
    transport: {
        read: function(options) {
            console.log("read");
            var param = 5;
            var data = getData(param);
            options.success(data);
        },
        update: function(options) {
            console.log("update");
            //do stuff
            options.data.bar = 20;
            //...
            options.success(options.data); //return the item
        },
        create: function(options) {
            console.log("create");
            //do stuff
            var item = options.data;
            item.foo = 1000; //generate id
            //...
            options.success(item); //return the item
        },
        destroy: function(options) {
            console.log("destroy");
            options.success();
         }            
    },
    schema: {
        model: {
            id: "foo",
            fields: {
                foo: { type: "number", editable: false },
                bar: { type: "number" }
            }                
        }
    }
});

$("#grid").kendoGrid({
    dataSource: dataSource,
    columns: [
        "foo", 
        "bar",
        { command: ["edit", "destroy"], width: "200px" }
    ],
    filterable: true,
    editable: "inline",
    toolbar: ["create"]
});