JSFiddle - React, Tailwind, and code Playground

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 data-role="view" data-model="productDetailModel">
    <div data-role="content">
        <aside>
            <p>Hello, I'm the Detail's page (Product)</p>
        </aside>
        <input id="visibilitySlider" data-role="switch" data-change="isChecked" />
    </div>
</div>

JavaScript

var app = new kendo.mobile.Application(document.body);

var crudServiceBaseUrl = "http://demos.kendoui.com/service",
    productDS = new kendo.data.DataSource({
    transport: {
        read:  function(options) {
            //url: crudServiceBaseUrl + "/Products",
            //dataType: "jsonp"
            console.log("read");
        },
        update: function(options) {
            //url: crudServiceBaseUrl + "/Products/Update",
            //dataType: "jsonp"
            console.log("update");
        },
        destroy: function(options) {
            //url: crudServiceBaseUrl + "/Products/Destroy",
            //dataType: "jsonp"
            console.log("destroy");
        },
        create: function(options) {
            //url: crudServiceBaseUrl + "/Products/Create",
            //dataType: "jsonp"
            console.log("create");
        },
        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: { validation: { required: true } },
                UnitPrice: { type: "number", validation: { required: true, min: 1} },
                Discontinued: { type: "boolean" },
                UnitsInStock: { type: "number", validation: { min: 0, required: true } }
            }
        }
    },
    change: function() {
        console.log("done");
        app.hideLoading();   
    }
});


function isChecked() {
    console.log("syncing");
    app.showLoading();
    setTimeout(function() { //timeout is set only for visual demonstration of the loading process
        productDS.sync();
    }, 500);           
}