JSFiddle - React, Tailwind, and code Playground

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>

CSS

#display {
    color: red;
}

JavaScript

var dataSource = new kendo.data.DataSource({
    schema: {
        data: "d",
        model: {
            id: "foo",
            fields: {
                foo: {
                    type: "number", editable: false
                },
                bar: {
                    type: "string"
                },
                baz: {
                    type: "string"   
                }
            }
        }
    },
    transport: {
        read: {
            //using jsfiddle echo service to simulate JSON endpoint
            url: "/echo/json/",
            dataType: "json",
            type: "POST",
            data: {
                // /echo/json/ echoes the JSON which you pass as an argument
                json: JSON.stringify({
                    d: [
                        { foo: 1, bar: "a", baz: "test" },
                        { foo: 2, bar: "b", baz: "test" },
                        { foo: 3, bar: "c", baz: "test" }
                    ]
                })
            }
        }
    }
});

$("#grid").kendoGrid({
    dataSource: dataSource,
    columns: [{ field: "foo", title: "foo >> editable:false"}, "bar", "baz", { command: ["edit"], title: "edit", width: "200px"}],
    editable: "inline",
    dataBound: function(e) {
        this.editRow(this.tbody.find("tr").eq(0));
    }
});