JSFiddle - React, Tailwind, and code Playground

by matbeard

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">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<div id="grid" style="margin-top: 15px"></div>

JavaScript

var crudServiceBaseUrl = 'http://demos.kendoui.com/service';
var dataSource, grid;

var products = [ 
    {
        "ProductName": "Chai",
        "Stock": 1.0044,
        "Price": "18.00"
    }, {
        "ProductName": "Chang",
        "Stock": 3.2345,
        "Price": "19.00"
    }, {
        "ProductName": "Aniseed Syrup",
        "Stock": 0.0800,
        "Price": "10.00"
    }, {
        "ProductName": "Chef Anton's Cajun Seasoning",
        "Stock": 2.346,
        "Price": "22.00"
    }, {
        "ProductName": "Chef Anton's Gumbo Mix",
        "Stock": 2.0000,
        "Price": "21.35"
    }, {
        "ProductName": "Grandma's Boysenberry Spread",
        "Stock": 7.8364,
        "Price": "25.00"
}];

$(document).ready(function() {
    
    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: 'json',

            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                   return {models: kendo.stringify(options.models)};
                }
            }
        },
        batch: true,
        pageSize: 30,
            schema: {
            model: {
                id: 'ProductID',
                fields: {
                    ProductID: { editable: false, nullable: true },
                    ProductName: { validation: { required: true } },
                    UnitPrice: { type: "number", validation: { required: true, min: 1} },
                    Discontinued: { type:...