JSFiddle - React, Tailwind, and code Playground

by doriansao

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>
<div id ="window"></div>
<script id="window-template" 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>

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 window = $('#window').kendoWindow({
    title    : 'Window',
    resizable: false,
    modal    : true,
    viewable : false,
    content  : {
        template: $('#window-template').html()
    }
}).data('kendoWindow');

kendo.bind(kendoWindow.element, data[0]);
window.open().center();