JSFiddle - React, Tailwind, and code Playground

by siliconsoul

HTML

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.mobile.all.min.css">
<div data-role="view" id="mainView"> 
    <ul data-role="listview" data-source="dataSource" data-template="template">
    </ul>
</div>  
<div data-role="view" id="editView">
    <div>
    <label for="ProductName">Product Name</label>
    <input required data-required-msg="Please enter a Product Name" id="ProductName" data-bind="value: editingItem.ProductName"/>
    </div>
        <div>
     <label for="UnitPrice">Unit Price</label>
    <input data-min="0" data-role="numerictextbox" data-max="100" required data-required-msg="Please enter a Unit Price" id="UnitPrice" data-bind="value: editingItem.UnitPrice"/>
</div>
    <a data-role="button" data-click="save">Save</a>
</div>
<script type="text/kendo" id="template">
<div>    
    <p>
        Product Name : #= ProductName# 
    </p>
    <p>
         Unit Price : #= UnitPrice# 
    </p>
    <a data-role="button" data-click="edit">Edit</a>
<div>
</script>

JavaScript

function edit(){
    var uid = this.element.closest("li").data("uid");
    var dataItem = dataSource.getByUid(uid);    
    viewModel.set("editingItem", dataItem);
    app.navigate("#editView");
}

function save(e){
    var validator = $("#editView").data("kendoValidator");        
    if(validator.validate()){
         dataSource.sync();  
         app.navigate("#mainView");                   
    }
}

var viewModel = kendo.observable({
    editingItem: null
});

kendo.bind($("#editView"), viewModel);
$("#editView").kendoValidator();

var crudServiceBaseUrl = "http://demos.kendoui.com/service",
    dataSource = new kendo.data.DataSource({
        transport: {
            read:  {
                url: crudServiceBaseUrl + "/Products",
                dataType: "jsonp"
            },
            update: {
                url: crudServiceBaseUrl + "/Products/Update",
                dataType: "jsonp"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }
            }
        },
        batch: true,
        pageSize: 30,
        schema: {
            model: {
                id: "ProductID",
                fields: {
                    ProductID: { editable: false, nullable: true },
                    ProductName: { type: "string" },
                    UnitPrice: { type: "number"},
                    Discontinued: { type: "boolean" },
                    UnitsInStock: { type: "number"}
                }
            }
        }
    });
 dataSource.read();
 var app = new kendo.mobile.Application(document.body);