JSFiddle - React, Tailwind, and code Playground

by doriansao

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.blueopal.min.css">
<div id="grid0"></div>

JavaScript

initializeGrid(0, $('#grid0'), []);

function initializeGrid(gridId, gridElement, data) {
    gridElement.kendoGrid({
        dataSource: getGridDataSource(data), 
        detailInit: function (e) {
            var subGrid = gridId + 1;       
            initializeGrid(subGrid, $('<div id="grid' + subGrid + '"/>').appendTo(e.detailCell),[]);
          },
        toolbar: [{ name: 'Add Top', template: '<div id="AddTop'+ gridId +'" class="AddTop">Add Top</div>'}, 
                  { name: 'Add Bot', template: '<div id="AddBot'+ gridId +'" class="AddBot">Add Bot</div>'}],
        columns: [            
            { field: "Name", title: "Name" },
            { field: "Age", title: "Age" },       
            { field: "Role", title: "Role", editor: roleEditor },            
            { command: "destroy", title: " "}],
        editable: true
    });
}

function getGridDataSource(data) {
    return new kendo.data.DataSource({
        data: data,
        schema: {
            model: {
                fields: {
                    Name: { editable: true, nullable: false },
                    Age: { editable: true, nullable: false },
                    Role: { editable: true, nullable: false }
                }
            }
        }
    });
}

function roleEditor(container, fieldOptions) {
    $('<input name="' + fieldOptions.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        dataTextField: "Role",
        dataValueField: "Id",
        autoBind: false,
        dataSource: [{Id: 1, Role: 'DEV'},{Id: 2, Role: 'QA'},{Id: 3, Role: 'Manager'}]
    });
}

$(document).on("click", ".AddTop", function () {    
    var gridId = $(this).attr('id').replace('AddTop','');    
    var grid = $('#grid' + gridId).data("kendoGrid");
    grid.addRow();
});

$(document).on("click", ".AddBot", function () {  
    var gridId = $(this).attr('id').replace('AddBot','');
    var grid = $('#grid' + gridId).data("kendoGrid");
    var data = grid.dataSource.data();
   ...