JSFiddle - React, Tailwind, and code Playground

by stratdaz

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.web.min.js"></script>
    <div id="main" class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="grid"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="grid2" data-role="grid"
                     data-editable="popup" data-toolbar='["create"]'
                     data-sortable="true" data-pageable="true"
                     data-columns='[{ "field": "ProductName", "title": "Product Name", "editor": vm.textareaEditor },{ "field": "UnitPrice", "title": "Unit Price" },{ "field": "UnitsInStock" },{"command": ["edit","destroy"]}]' data-bind="source: myDataSource, events: { edit: editProduct }"></div>
            </div>
        </div>
    </div>

JavaScript

(function ($, kendo, window) {
    var crudServiceBaseUrl = "http://demos.kendoui.com/service";
    var viewModel = kendo.observable({
        myDataSource: 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: 8,
            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 } }
                    }
                }
            }
        }),
        textareaEditor: function (container, options) {
            $('<textarea class="k-textbox" data-bind="value: ' + options.field + '" style="width: 400px; height: 50px"></textarea>')
            .appendTo(container);
        },
        editProduct: function(e)
        {
            if (e.model.isNew()) {
 ...