JSFiddle - React, Tailwind, and code Playground

by Suraj Naik

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.mobile.all.min.css">
<script id="detail-tmpl" type="text/x-kendo-template">
    <div id = "grid_#=uid#"
         class = "detailGrid"
         style = "width: 579px;"
         data-role = "grid"
         data-columns = '[{ 
                "field": "Name",
                "headerAttributes": { "style": "display: none"} 
            }]'
         data-editable = "true"
         data-selectable = "true"
         data-scrollable = "false"
         data-pageable = "false"
         data-bind = "source: Items" ></div>
</script>
        
<div id="groupContainer">
    <div id="groupGrid" 
         data-role="grid"
         data-editable="true"
         data-selectable="true"
         data-columns="[
                        { field: 'Name' }
                      ]" 
         data-bind="source: Groups, events: { dataBound: OnGroupDataBound, detailInit: OnDetailInit }"
         data-detail-template="detail-tmpl"></div>
</div>

JavaScript

var vm = null;

function CreateVM(data) {
    var grpDS = kendo.data.DataSource.create({
        data: data,
        schema: {
            model: {
                id: "Id",
                fields: { 
                    Name: { editable: true }
                }
            }
        }
    });

    vm = kendo.observable({
        Groups: grpDS,
        OnDetailInit: function (e) {
            var detailRow = e.detailRow;
            var masterRow = e.masterRow;
            var masterRowDataItem = e.sender.dataItem(masterRow);
            kendo.bind(detailRow, masterRowDataItem);
        },
        OnGroupDataBound: function (e) {
            var masterRows = e.sender.tbody.find("tr.k-master-row");
            e.sender.expandRow(masterRows);
            $(".k-hierarchy-cell").remove();
            $(".k-hierarchy-col").remove();
        }
    });

}

var grdData = [{
    Id: 1,
    Name: "G1",
    Items: [{
        Code: "G1I1",
        Name: "G1 > Item1"
    }, {
        Code: "G1I2",
        Name: "G1 > Item2"
    }]
}, {
    Id: 2,
    Name: "G2",
    Items: [{
        Code: "G2I1",
        Name: "G2 > Item1"
    }, {
        Code: "G2I2",
        Name: "G2 > Item2"
    }]
}, {
    Id: 3,
    Name: "G3",
    Items: [{
        Code: "G3I1",
        Name: "G3 > Item1"
    }, {
        Code: "G3I2",
        Name: "G3 > Item2"
    }]
}];

CreateVM(grdData);

kendo.bind($("#groupContainer"), vm);