JSFiddle - React, Tailwind, and code Playground

by siliconsoul

HTML

<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.default.min.css">
<div id="data-container">
    <div data-bind="html: dataLoaded"></div>

    <div id="grid" class="gridStandard" data-bind="source: modelsDataSource"></div>
</div>

JavaScript

$(document).ready(function () {
    kendo.bind($("#data-container"), viewModel);
});

$("#grid").kendoGrid({
    autoBind: true,
    pageable: true,
    sortable: true,
    selectable: true,
    editable: {
        mode: "popup",
        confirmation: "Are you sure you wish to delete this item?",
        window: {
            width: 480
        }
    },
    toolbar: ["create"],
    columns: columns,
    edit: function (e) {
        onEdit(e);
    }
});

var urlBase = "http://localhost:63604";
var urlController = urlBase + "/Option/Category/";
var urlSubCategory = urlBase + '@Url.Action("Index", "SubCategory")';

var columns = [
    { command: [{ name: "edit", text: "&nbsp;" }, { name: "destroy", text: "&nbsp;" }], title: "&nbsp;", className: "columnCommand" },
    { field: "Id" },
    {
        field: "Name"
    },
    {
        field: "Code"
    },
    {
        field: "Order",
        format: "{0:0}"
    },
    {
        template: "<a href='" + urlSubCategory + "?id=#: Id #'" + ">#: SubCategoryCount #</a>"
    }];

var fields = {
    Name: { type: "string", validation: { maxlength: 35, required: true } },
    Code: { type: "string", validation: { maxlength: 10 } },
    Order: { type: "number", defaultValue: 1, validation: { min: 1, required: true } },
    SubCategoryCount: { type: "number", editable: false }
};

var urlRead = urlController + "Read";
var urlCreate = urlController + "Create";
var urlUpdate = urlController + "Update";
var urlDestroy = urlController + "Destroy";
var id = 3;
var viewModel = kendo.observable({
    modelsDataSource: new kendo.data.DataSource({
        type: "json",
        serverPaging: true,
        serverSorting: false,
        serverFiltering: true,
        pageSize: 20,
        transport: {
            read: function(options){
                var data = [{Id: 1, Name: "Name1", Code: "Code1", Order: 1, SubCategoryCount: 1}, 
                           {Id: 2, Name: "Name1", Code: "Code1", Order: 1, SubCategoryCount: 1}];
          ...