JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
    <a class="offline-button" href="../index.html">Back</a>
            <div id="example" class="k-content">
            <div id="grid"></div>

           
        </div>
		
		<script type="text/x-kendo-template" id="gridTemplate">
		   <div id="details"></div>
		</script>
		
   <script type="text/x-kendo-tmpl" id="template">
        <div class="product-view">
            <dl>
                <dt>Product Name</dt>
                <dd>${ProductName}</dd>
                <dt>Unit Price</dt>
                <dd>${kendo.toString(UnitPrice, "c")}</dd>
                <dt>Units In Stock</dt>
                <dd>${UnitsInStock}</dd>
                <dt>Discontinued</dt>
                <dd>${Discontinued}</dd>
            </dl>
            <div class="edit-buttons">
                <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span>Edit</a>
                <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span>Delete</a>
            </div>
        </div>
    </script>

    <script type="text/x-kendo-tmpl" id="editTemplate">
        <div class="product-view">
            <dl>
                <dt>Product Name</dt>
                <dd>
                    <input type="text" data-bind="value:ProductName" name="ProductName" required="required" validationMessage="required" />
                    <span data-for="ProductName" class="k-invalid-msg"></span>
                </dd>
                <dt>Unit Price</dt>
                <dd>
                    <input type="text" data-bind="value:UnitPrice" data-role="numerictextbox" data-type="number" name="UnitPrice" required="required" min="1"...

JavaScript

var myModel = kendo.data.Model.define({
         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 } }
         }
     }); 

$(document).ready(function () {
     
     var crudServiceBaseUrl = "http://demos.kendoui.com/service",
         dataSource = new kendo.data.DataSource({
             transport: {
                 read:  {
                     url: crudServiceBaseUrl + "/Products",
                     dataType: "jsonp"
                 }
             },
             batch: true,
             pageSize: 30,
             schema: {
                 model: myModel
             }
             });
             
    $("#grid").kendoGrid({
        dataSource: dataSource,
        height: 400,
        detailInit: detailInit,
        detailTemplate: kendo.template($("#gridTemplate").html()),
        columns: [
            { field:"ProductName", title: "Product Name" },
            { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "150px" },
            { field: "UnitsInStock", title:"Units In Stock", width: "150px" },
            { field: "Discontinued", width: "100px" }
        ]                                                
    });
 });

function detailInit(e) {
    var detailRow = e.detailRow,
     data = this.dataSource.data(),
    codeDetailData = e.data;
    
    detailRow.find("#details").kendoListView({
        dataSource : new kendo.data.DataSource({
            data: [codeDetailData.toJSON()],
            schema : {
                model : myModel
            }                        
        }),
        save: function(e) {
            if (this.editable.end()) {            
               ...