JSFiddle - React, Tailwind, and code Playground

by korchev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id="software"></div>
<script type="text/x-kendo-template" id="kendo-template-edit">
    <div class="k-edit-label">
        <label>Name</label>
    </div>
    <div class="k-edit-field" data-container-for="name">
        <input type="text"
               required="required"
               name="name"
               data-type="string"
               data-bind="value:name" />
    </div>
    <div class="k-edit-label">
        <label>Notes</label>
    </div>
    <div class="k-edit-field" data-container-for="note">
        <textarea name="note"
                  data-bind="value:note"
                  style="width: 250px; height: 100px;" ></textarea>
    </div>
    <input type="hidden" data-bind="value:vendor_name" />
    <input type="hidden" data-bind="value:category_name" />
</script>

JavaScript

$("#software").kendoGrid({
        scrollable: false,
        dataSource: {
            pageSize: 10,
            transport: {
                create: {
                    url: "/echo/json/",
                    dataType: "json"
                },
                read: {
                    url: "/echo/json/",
                    dataType: "json",
                    type: "POST",
                    data: {
                        json: JSON.stringify([ { name: "name", vendor: "vendor", vendor_name: "vendor_name", code: "code", category_name: "category_name", note: "note", pkid: 1 } ])
                    }
                },
                update: {
                    url: "/echo/json/",
                    dataType: "json",
                    type: "POST"
                },
                destroy: {
                    url: "/echo/json/",
                    dataType: "json"
                }
            },
            schema: {
                model: {
                    id: "pkid",
                    fields: {
                        name: { type: "string", validation: { required: true } },
                        vendor: { type: "string" },
                        vendor_name: { type: "string" },
                        code: { type: "string" },
                        category_name: { type: "string" },
                        note: { type: "string" },
                        pkid: "pkid"
                    }
                }
            }
        },
        columns: [
            { field: "name", title: "Name" },
            { field: "vendor_name", title: "Vendor Name" },
            { field: "category_name", title: "Category Name" },
            { command: "destroy", width: 110 }
        ],
        toolbar: [
            { name: "create", text: "Add" }
        ],
        editable: {
            mode: "popup",
            confirmation: "Do you want to delete?",
            template: $("#kendo-template-edit").html()
        }
    });
 
    // show...