JSFiddle - React, Tailwind, and code Playground

by OnaBai

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
<div data-role="view" data-model="my_model">
    <a class="button" data-role="button" data-click="showValues">Show values</a>
    <ul data-role="listview" data-bind="source: ds" data-template="list-tmpl"></ul>
</div>

<script id="list-tmpl" type="text/kendo-tmpl">
    <span>#= name # : #= active #</span>
    <input data-role="switch" data-bind="checked: active"/>
</script>

<div id="traces"></div>

<script id="list-tmpl" type="text/kendo-tmpl">
    <span>#= name # : #= active #</span>
    <input data-role="switch" data-bind="checked: active"/>
</script>

JavaScript

var win = $("#traces").kendoWindow({
        title: "Values",
        visible: false,
        width: 400,
        height: 300
    }).data("kendoWindow");

    function readData(op) {
        op.success([
            { id: 1, name: "name1", active: true },
            { id: 2, name: "name2", active: false},
            { id: 3, name: "name3", active: true }
        ]);
    }

    function updateData(op) {
        alert("update");
    }

    var my_model = kendo.observable({
        ds: new kendo.data.DataSource({
            transport: {
                read: readData,
                update: updateData
            },
            pageSize: 10,
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: { type: "number" },
                        name: { type: "string" },
                        active: { type: "boolean" }
                    }
                }
            }
        })
    });
    function showValues(e) {
        win.content("<pre>" + JSON.stringify(my_model.ds.data(), null, 4) + "</pre>").open().center();
    }
    var app = new kendo.mobile.Application(document.body);