JSFiddle - React, Tailwind, and code Playground

by chanaka1

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.dataviz.min.css">
<div id="example">
    <input type="button" class="k-button" id="btnSelect" value="Select Item" />
    <input type="button" class="k-button" id="btnEdit" value="Edit Item" />

    <div id="display">
        Name:&nbsp;<span data-bind="text: selectedItem.Name"></span>
        <br />
        Age:&nbsp;<span data-bind="text: selectedItem.Age"></span>
        <br />
        Last Log On Date:&nbsp;<span data-bind="text: selectedItem.LastLogOn"></span>
    </div>

    <div id="window" data-role="window" data-min-height="250px" data-min-width="400px" data-resizable="false" data-title="Edit Window" data-visible="false">
        <label>Name: <input class="k-input" data-bind="value: selectedItem.Name" /></label>
        <br />
        <label>Age: <input data-role="numerictextbox" data-bind="value: selectedItem.Age" /></label>
        <br />
        <label>Last Log On: <input data-role="datepicker" data-bind="value: selectedItem.LastLogOn"/></label>
        <br />
        <input type="button" class="k-button" id="btnClose" value="Close" />
    </div>
</div>

CSS

#display 
{
    margin-top: 20px;
    border: 1px solid #000;
    padding: 5px;
    margin: 20px 40px;
}
#display span 
{
    color:#f00;
}

JavaScript

viewModel = kendo.observable({
    selectedItem: null,
    editItem: function(item) {
        selectedItem = item;
    }
});

kendo.bind($("#example"), viewModel);

$("#btnSelect").bind("click", function (e) {
    var item = { Name: "Jack", Age: 33, LastLogOn: new Date() };
    viewModel.set("selectedItem", item);
});

$("#btnEdit").bind("click", function (e) {
    $("#window").data("kendoWindow").open().center();
});

$("#btnClose").bind("click", function (e) {
    $("#window").data("kendoWindow").close();
});