JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
Test
<script type="text/x-kendo-template" id="template">
  <div class="toolbar">
   <a id="create" class="k-button k-button-icontext k-grid-add"><span class="k-icon k-add"></span>Add new record</a>
  </div>
</script>
<div id="grid"></div>

JavaScript

var newId = 3;

$(document).ready(function() {
    var data = [{Foo: "a.1", Bar: "a.2", Id: 1},{Foo: "b.1", Bar: "b.2", Id: 2}],
        counter = data.length;
    $("#grid").kendoGrid({
        dataSource: {
            transport: {
                read: function(o) {
                    //pass the date
                    o.success(data);
                },
                create: function(o) {
                    var item = o.data;
                    //assign a unique ID and return the record
                    counter++;
                    item.Id = counter;
                    o.success(item);
                },
                update: function(o) {
                    //edit the local array and mark the operation as successful
                    o.success();
                },
                destroy: function(o) {
                    //edit the local array and mark the operation as successful
                    o.success();   
                }
            },
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Foo: {editable: true, defaultValue: ""},
                        Bar: {editable: true, defaultValue: ""}
                    }
                }
            }

        },
        groupable: false,
        sortable: false,
        pageable: false,
        toolbar: kendo.template($("#template").html()),
        editable: {mode: "inline"},
        columns: [
            { command: ["edit","destroy"]},
            {
                field: "Foo",
                title: "Foo"
            } , {
                field: "Bar",
                title: "Bar"
            }
        ]
    }); // kendo grid
}); // document ready

function addRow() {
    $("#grid").data("kendoGrid").dataSource.add();
}