JSFiddle - React, Tailwind, and code Playground

by inikolova

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.default.min.css">
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
      <div id="grid"></div>

<div id="details"></div>
<button onclick="addNew()">Add new record</button>
 <script type="text/x-kendo-template" id="template">
                <div id="details-container">
                    <h2>#= FirstName # #= LastName #</h2>
                    <em>#= Title #</em>
                    <dl>
                        <dt>City: #= City #</dt>
                        <dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>
                    </dl>
                </div>
            </script>

CSS

#details-container
                {
                    padding: 10px;
                }

                #details-container h2
                {
                    margin: 0;
                }

                #details-container em
                {
                    color: #8c8c8c;
                }

                #details-container dt,
                {
                    margin:0;
                    display: inline;
                }

JavaScript

function addNew() {
    var newObj = {
        FirstName: "",
        LastName: "",
        Title: ""
    }

    var grid = $("#grid").data("kendoGrid");
    grid.addRow();

    //var uid = ds.add(newObj).uid;
        //debugger;
}
$(document).ready(function() {
    var grid = $("#grid").kendoGrid({
        dataSource: {
            pageSize: 10,
            data: createRandomData(20),
            batch: false,
            schema: {
                total: function(data) {
                    console.log(data.length);
                    return data.length;
                },
                model: {
                    fields: {
                        FirstName: {
                            type: "string"
                        },
                        LastName: {
                            type: "string"
                        },
                        Title: {
                            type: "string"
                        }
                    }
                }
            }
        },
        pageable: true,
        editable: "inline",
        height: 260,
        columns: [
            {
            field: "FirstName",
            title: "First Name"},
        {
            field: "LastName",
            title: "Last Name"},
        {
            field: "Title"},
        {
            command: ["edit", "destroy"],
            title: "&nbsp;",
            width: "210px"}]
    }).data("kendoGrid");

    var wnd = $("#details").kendoWindow({
        title: "Customer Details",
        modal: true,
        visible: false,
        resizable: false,
        width: 300
    }).data("kendoWindow");

    var detailsTemplate = kendo.template($("#template").html());

    $("#grid").delegate(".details-button", "click", function(e) {
        e.preventDefault();

        var dataItem = grid.dataItem($(this).closest("tr"));
        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    });
});