JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

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

JavaScript

var gridData = [
        {id: 1, foo: 1, bar: 1},
        {id: 2, foo: 2, bar: 2},
        {id: 3, foo: 3, bar: 3}    
    ],
    idIncrement = gridData.length + 1;

$("#grid").kendoGrid({
    dataSource: {
        transport: {
            read: function(options) {
                console.log("read");
                
                var data = gridData;
                
                options.success(data);
            },
            update: function(options) {
                console.log("update");
                
                var model = options.data;
                
                options.success([model]);
            },
            create: function(options) {
                console.log("create");
                
                var model = options.data;
                model.id = idIncrement;
                idIncrement++;
                
                options.success([model]);
            },
            destroy: function(options){
                console.log("destroy");
                
                options.success();
            }
        },
        schema: {
            model: {
                id: "id",
                fields: {
                    id: {type: "number"},
                    foo: {type: "number"},
                    bar: {type: "string"}                    
                }
            }                
        }
    },
    columns: ["foo","bar", { command: ["edit", "destroy"]}],
    editable: "inline",
    toolbar: ["create"]
});