JSFiddle - React, Tailwind, and code Playground

by marhaba

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<button id="rec1" class="k-button">Record 1</button>
<button id="rec2" class="k-button">Record 2</button>
<button id="rec3" class="k-button">Record 3</button>
<button id="rec4" class="k-button">Record 4</button>
<script id="record-jsp" type="text/x-kendo-template">
    <div>
        <p>This is your form with some sample data</p>
        <label>text1: <input type="text" data-bind="value: text1"></label>
        <label>text2: <input type="text" data-bind="value: text2"></label>
    </div>
</script>

CSS

* {
    font-family: Verdana, sans-serif;
    font-size: 12px;
}

JavaScript

var data = [
    { text1: "text1.1", text2: "text1.2" },
    { text1: "text2.1", text2: "text2.2" },
    { text1: "text3.1", text2: "text3.2" },
    { text1: "text4.1", text2: "text4.2" }
];

//            var template = $("#record-jsp").html();
var kendoWindow = $("<div id='window'/>").kendoWindow({
    title    : "Record",
    resizable: false,
    modal    : true,
    viewable : false,
    content  : {
        template: $("#record-jsp").html()
    }

}).data("kendoWindow");

$("#rec1").on("click", function () {
    openForm(data[0]);
});
$("#rec2").on("click", function () {
    openForm(data[1]);
});
$("#rec3").on("click", function () {
    openForm(data[2]);
});
$("#rec4").on("click", function () {
    openForm(data[3]);
});

function openForm(record) {
    kendo.bind(kendoWindow.element, record);
    kendoWindow.open().center();
}