JSFiddle - React, Tailwind, and code Playground

by karthick Chandran

HTML

<script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<body>

        <div id="example" class="k-content">
            <div id="grid"></div>
        </div>


</body>

CSS

<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css" rel="stylesheet" />

JavaScript

$(document).ready(function() {
    
                    $("#grid").kendoGrid({
                        dataSource: {
                          data: [
                              {Name: "first", Items: []},
                          	{Name: "second", Items: []}
                          ],
                            schema: {
                                model: {
                                    fields: {
                                        Name: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 20
                        },
                        height: 430,
                        scrollable: true,
                        sortable: true,
                        filterable: true,
                        pageable: {
                            input: true,
                            numeric: false
                        },
                        detailInit: detailInit,
                        detailExpand: detailExpand,
                        columns: [
                            
                            { field: "Name", title: "Name", width: "130px" },
                          { command: [
                            {name: "edit"}, 
                            {name: "destroy"},
                            { text: "Add item", click: addItem }], 
                           title: "&nbsp;", width: "172px" }
                        ],
                      editable: "inline",
                      toolbar: ["create"]
                    });
                });
              var addItemNow = false;
              function addItem(e) {
                var row = $(e.currentTarget).closest("tr");
                  
                addItemNow = true;  
                var grid = $("#grid").data("kendoGrid");
                grid.expandRow(row);
              };

function detailInit(e) {
    $("<div...