JSFiddle - React, Tailwind, and code Playground

by Joel D'Souza

HTML

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

CSS

.k-grid table
{
    min-width: 600px;
}
.km-pane-wrapper {
    position: relative;
}

JavaScript

var crudServiceBaseUrl = "http://demos.kendoui.com/service";
        var dataSource = new kendo.data.DataSource({
            transport: {
                read:  {
                    url: crudServiceBaseUrl + "/Products",
                    dataType: "jsonp"
                },
                update: {
                    url: crudServiceBaseUrl + "/Products/Update",
                    dataType: "jsonp"
                },
                destroy: {
                    url: crudServiceBaseUrl + "/Products/Destroy",
                    dataType: "jsonp"
                },
                create: {
                    url: crudServiceBaseUrl + "/Products/Create",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductID: { editable: false, nullable: true },
                        ProductName: { validation: { required: true } },
                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                        Discontinued: { type: "boolean" },
                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                    }
                }
            }
        });

var gridOptions = {
            dataSource: dataSource,
            pageable: true,
            mobile: "phone",
            height: '',
            toolbar: ["create"],
            columns: [
                { field:"ProductName", title: "Product Name" },
                { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "100px" },
                { field:...