Kendo - Base Q3

by valchev

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">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<div id="grid"></div>

JavaScript

var arr = [
    {foo: 1, bar: "Item1"},
    {foo: 2, bar: "Item2"},
    {foo: 3, bar: "Item3"},
    {foo: 4, bar: "Item4"},
    {foo: 5, bar: "Item5"}
];

$("#grid").kendoGrid({
    dataSource: {
        transport: {
            read: function (o) {
                o.success(arr);
            },
            destroy: function (o) {
                setTimeout(function() {
                    o.error({}, 500, "destroy error");
                }, 500);
            }
        },
        schema: {
            model: {id: "foo"}
        },
        error: function (err) {
            var that = this;
            if(err.errorThrown === "destroy error") {
                alert("destroy operation failed"); 
                that.cancelChanges(); 
            }
        },
        success: function (e) {
            console.log("success");
        }
    },
    editable: "inline",
    columns: [
        {field: "foo"},
        {field: "bar"},
        {command: ["destroy"]}
    ]
})