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"
     data-role="grid"
     data-sortable="false"
     data-pageable="false"
     data-scrollable="true"
     data-bind="source: data, events: { detailInit: createDetail }"
>
</div>

<pre data-bind="text: display"></pre>

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
            }
        ]
    }
];

var viewModel = kendo.observable({
    data: items,
    
    display: function() {
        var source = this.get("data");
        return $.map(source, function(item) {
            return kendo.stringify(item);
        }).join(",\r\n");
    },
    
    createDetail: function(e) {
        console.log(e);   
    }
});

kendo.bind(document.body, viewModel);