JSFiddle - React, Tailwind, and code Playground

by JayData

HTML

<script src="http://include.jaydata.org/jaydata.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<script src="http://include.jaydata.org/jaydatamodules/kendo.js"></script>
<script src="http://jaydata-cdn.s3.amazonaws.com/datajs-1.0.3-patched.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<div id="grid"></div>

JavaScript

function getRemoteNorthwind() {
    return $data.initService("http://jaydata.org/examples/Northwind.svc")
    .then(function (m, f, t) {
        return m;
    });
}
$.when(getRemoteNorthwind())
.then(function(remoteDB) {
    $('#grid').kendoGrid({
        dataSource: remoteDB.Products.asKendoDataSource({ pageSize: 10 }),
        filterable: true,
        sortable: true,
        pageable: true,
        height: 500,
        columns: [
            { field: 'Product_Name' },
            { field: 'Unit_Price' },
            { field: 'Units_In_Stock' },
            { command: ["edit", "destroy", "update"] }
        ],
        toolbar: ["create", "save", "cancel"],
        editable: true
    });
});