JSFiddle - React, Tailwind, and code Playground

by Bladetrick

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div id="gridMasterInfo"></div>
<div id="divInnerTasksGrid"></div>    
<button id="btnAddTask">Add Task</button>
<div id="divAddTaskWindow" />

CSS

#pnlMasterInfoGrids, #gridInductedTasks {
    width : 100%;
    float: left;
}

.highlightTR {
    background-color: #99CCFF;
}

.rowclone {
    width: 90%;    
    background-color: lightgreen;
}

JavaScript

var elementMasterInfo;

$(document).ready(function() {
     elementMasterInfo = $("#gridMasterInfo").kendoGrid({
         dataSource: {
             type: "odata",
             transport: {
                 read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
                        },
             pageSize: 6,
         },
         height: 430,
         //selectable: true,
         sortable: true,
         pageable: true,
         detailInit: detailInit,
         detailExpand: function(e) {
            //this.collapseRow(this.tbody.find(' > tr.k-master-row').not(e.masterRow));
         },
         columns: [
             {
                 field: "FirstName",
                 title: "First Name",
                 width: "110px"
             },
             {
                 field: "LastName",
                 title: "Last Name",
                 width: "110px"
             },
             {
                 field: "EmployeeID",
                 width: "110px"
             }
         ],              
     }).data("kendoGrid");
     
     $("#gridMasterInfo").delegate('tbody>tr', 'click', function () {
         $(this).toggleClass('k-state-selected');       
         
         var grid = $("#gridMasterInfo").data("kendoGrid");
         //var selectedItem = grid.dataItem(grid.select());
         console.log(selectedItem);
         grid.expandRow(".k-master-row:first");
         
         //SubTaskGrid_#=TaskNum#
 
         
         //var grid = $("#gridMasterInfo").data("kendoGrid");
         //var rows = grid.table.find(">tbody>tr");
 
         
         //grid.expandRow(rows);
         
         //grid.table.select(grid.table.find(">tbody>tr"));
        
         //console.log(rows);
    });
});




var data = [
    { id: 1, text: "text 1", position: 0, draggable: 0 },
    { id: 2, text: "text 2", position: 1, draggable: 0 },
    { id: 3, text: "text 3", position: 2, draggable: 0 }
]

var dataSource = new kendo.data.DataSource({
       ...