JSFiddle - React, Tailwind, and code Playground

by thesnoman

HTML

<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.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.metro.min.css">
<head>
    <title></title>
    <meta name="viewport" content="width=320px, initial-scale=1, maximum-scale=1" />
</head>
<body>


    <div id="SelectionWindow" style="width: 250px; height: 300px">
        <div id="Grid" style="height: 280px">
        </div>
    </div>


    <div id="ConfirmWindow">
        <div>
            <label id="MessageLabel">
            </label>
        </div>
        <div style="width: 100%; text-align: right; margin-top: 15px">
            <input id="ContinueButton" type="button" value="Continue" /><input id="CancelButton" type="button" value="Cancel" style="margin-left: 15px" />
        </div>
    </div>


</body>

JavaScript

var items = [
    {
    id: 1,
    name: "This is the first item",
    grp: "One"},
{
    id: 2,
    name: "This is the second item",
    grp: "One"},
{
    id: 3,
    name: "This is the third item",
    grp: "One"},
{
    id: 4,
    name: "This is the fourth item",
    grp: "Two"},
{
    id: 5,
    name: "This is the fifth item",
    grp: "Two"},
{
    id: 6,
    name: "This is the sixth item",
    grp: "Two"},
{
    id: 7,
    name: "This is the seventh item",
    grp: "Two"},
{
    id: 8,
    name: "This is the eighth item",
    grp: "Three"},
{
    id: 9,
    name: "This is the ninth item",
    grp: "Three"},
{
    id: 10,
    name: "This is the tenth item",
    grp: "Three"},
{
    id: 11,
    name: "This is the eleventh item",
    grp: "Three"},
{
    id: 12,
    name: "This is the twelth item",
    grp: "Three"}
];

var ds = new kendo.data.DataSource({
    data: items,
    group: {
        field: "grp"
    }
});



function ShowConfirmWindow() {
    $('#MessageLabel').text('This is a test message.');
    $('#ConfirmWindow').data('kendoWindow').center().open();

    $('#ContinueButton').click(function() {
        alert('You chose to continue on!');
        $('#ConfirmWindow').data("kendoWindow").close();
    });

    $('#CancelButton').click(function() {
        $('#ConfirmWindow').data("kendoWindow").close();
    });
};


function ShowSelectionWindow() {
    $('#SelectionWindow').data('kendoWindow').center().open();


    $('#Grid').kendoGrid({
        dataSource: ds,
        selectable: "row",
        scrollable: true,
        groupable: false,
        columns: [
            {
            field: "name",
            title: "Name"
            },
        {
            field: "grp",
            title: "Group",
            hidden: true}
        ],
        change: function() {
            var entity = this.dataSource.getByUid(this.select().data("uid"));
            ShowConfirmWindow();
        }
    });
}

$(document).ready(function() {

   ...