JSFiddle - React, Tailwind, and code Playground

by Kishore Sahasranaman

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.silver.min.css">
<script src="http://demos.kendoui.com/content/shared/js/products.js"></script>
          <div id="status"></div> 
<div id="example" class="k-content">
            <div id="grid"></div>

JavaScript

var testing = "<span class=\"k-textbox k-space-right\" id=\"bs-text-area-label\"><input class=\"text-box single-line\" data-val=\"true\" data-val-required=\"The CTextArea field is required.\" id=\"CTextArea\" maxlength=\"15\" name=\"CTextArea\" style=\"text-transform:uppercase\" type=\"text\" value=\"\" data-bind=\"value:CTextArea\"><a href=\"JavaScript:void();\" class=\"k-icon k-i-pencil\" id=\"bs-toggle-detailed-block\">&nbsp;</a></span>";
                $(document).ready(function () {
                    var dataSource = new kendo.data.DataSource({
                       pageSize: 20,
                       data: products,
                       autoSync: true,
                       schema: {
                           model: {
                             id: "ProductID",
                             fields: {
                                ProductID: { editable: false, nullable: true },
                                ProductName: { validation: { required: true } },
                                Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },
                                UnitPrice: { type: "number", validation: { required: true, min: 1} }
                             }
                           }
                       }
                    });

                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        pageable: true,
                        height: 430,
                        toolbar: ["create"],
                        columns: [
                            { field:"ProductName",title:"Product Name" },
                            { field: "Category", title: "Category", width: "160px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
                            { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
                            { command: "destroy", title: " ", width: "90px" }],
                       ...