JSFiddle - React, Tailwind, and code Playground

HTML

<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.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<div id="grid"></div>

JavaScript

var items = [
    {
        "ItemID": 1,
        "Selected": true,
        "Item": "Item 1",
        "Price": 50,
        "SubItems": [
            {
                "ItemID": 1,
                "SubItemID": 1,
                "Selected": true,
                "SubItem": "SubItem 1",
                "Price": 20
            },
            {
                "ItemID": 1,
                "SubItemID": 2,
                "Selected": true,
                "SubItem": "SubItem 2",
                "Price": 30
            }
        ]
    },
    {
        "ItemID": 2,
        "Selected": true,
        "Item": "Item 2",
        "Price": 100,
        "SubItems": [
            {
                "ItemID": 2,
                "SubItemID": 3,
                "Selected": true,
                "SubItem": "SubItem 3",
                "Price": 70
            },
            {
                "ItemID": 2,
                "SubItemID": 4,
                "Selected": true,
                "SubItem": "SubItem 4",
                "Price": 30
            }
        ]
    }
];

$("#grid").kendoGrid({
    dataSource: items,
    sortable: false,
    pageable: false,
    scrollable: true,
    detailInit: createDetail,
    columns: [{
        field: "Selected", title: " ", width: 30,
        template: "<input type='checkbox' class='check-item' data-id-item='#= ItemID #' #= Selected ? checked='checked' : '' # />"
    },
    { field: "Item", width: "200px" },
    { field: "Price", title: "$", template: '#= kendo.toString(Price, "c") #' }]
});

function createDetail(e) {
    $("<div/>")
        .appendTo(e.detailCell)
        .kendoGrid({
            dataSource: e.data.SubItems,
            scrollable: true,
            sortable: false,
            pageable: false,
            columns: [{
                field: "Selected", title: " ", width: 30,
                template: "<input type='checkbox' class='check-sub-item' data-id-item='#= ItemID #' #= Selected ? checked='checked' : '' # />"
            },
 ...