JSFiddle - React, Tailwind, and code Playground

by valchev

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">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<div id="grid"></div>

<script type="text/x-kendo-template" id="template">
    <div class="k-edit-form-container">
        <div class="k-edit-label">
            <label for="foo">foo</label>
        </div>
        <div data-container-for="foo" class="k-edit-field">
            <input data-bind="text: foo" />
        </div>
        <a class="k-button k-button-icontext" id="btnUpdate" href="\\#">
            <span class="k-icon k-update"></span>
            Update
        </a>
        <a class="k-button k-button-icontext" id="btnCancel" href="\\#">
            <span class="k-icon k-cancel"></span>
            Cancel
        </a>
    </div>
</script>

JavaScript

var myModel = kendo.data.Model.define({
  id: "id",
  fields: {
    id: { type: "number", editable: false },
    foo: { type: "string" },
    date: { type: "date" }
  }
});

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
        //using jsfiddle echo service to simulate JSON endpoint
            url: "/echo/json/",
            dataType: "json",
            type: "POST",
            data: {
                // /echo/json/ echoes the JSON which you pass as an argument
                json: JSON.stringify([
                    {id: 1, foo: "bar", date: "01/23/2013"},
                    {id: 2, foo: "bar", date: "01/23/2013"},
                    {id: 1, foo: "bar", date: "09/20/2012"}
                ])
            }
        }
  },
  schema: {
    model: {
          id: "id",
          fields: {
            id: { type: "number", editable: false },
            foo: { type: "string" },
            date: { type: "date" }
          }   
      }
  }
});

$("#grid").kendoGrid({
  dataSource: dataSource,
  columns: [
    "id",
    "foo", 
    {field: "date", format: "{0:yyyy}"},
    { command: { text: "Command", className: "edit-button" }, title: " ", width: "110px" }
  ]
});

$("#grid").delegate(".edit-button", "click", function(e) {
    var grid = $("#grid").data("kendoGrid"),
        model = grid.dataItem($(this).closest("tr"));
    
    popUpEdit(model, e);
});

function popUpEdit(model, e) {
    var wnd, detailsTemplate;
    
    var window = $("<div id='popupEditor'>")
            .appendTo($("body"))
            .kendoWindow({
                title: "Add new record",
                modal: false,
                width: 600,
                height: 500,
                content: {
                    //sets window template
                    template: kendo.template($("#template").html())
                }
            })
            .data("kendoWindow")
            .center();
    
    kendo.bind(window.element, model);
    
   ...