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");
     
    //elementMasterInfo.on("click", "tr", function(e) {    
        //$(elementMasterInfo).data().kendoGrid.expandRow($(this));        
    //});
    	
    $("#btnAddTask").bind("click", function () {
 				
    });
});




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 },
    { id: 4, text: "text 4", position: 3, draggable: 0 },
    { id: 5, text: "text 5", position: 4, draggable: 0 },
    { id: 6, text: "text 6", position: 5, draggable: 0 },
    { id: 7, text: "text 7", position: 6, draggable: 0 }
]

var dataSource = new kendo.data.DataSource({
        data: data,        
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { type: "number" },
                    text: { type: "string" },
                    position:...