JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<div id="grid"/>

JavaScript

var viewModel = kendo.observable({
    items: [],
    counter: 0
});

function initGrid(gridElement, items) {
    gridElement.kendoGrid({
        dataSource: {
            data: items,
            schema: {
                model: {
                    fields: {
                        name: {
                            type: "string"
                        }
                    }
                }
            }
        },
        columns: ["name"],
        toolbar: [{
            name: 'universalSearchGridAddExpression',
            template: '<a class="universalSearchGridAddExpression">Add Expression</a>'}],
        editable: true,
        detailInit: function(e) {
            initGrid($("<div/>").appendTo(e.detailCell), e.data.subitems);
        },
        dataBound: function(e) {
            var grid = e.sender;
            //grid.expandRow(grid.tbody.find(">tr.k-master-row"));
            //grid.tbody.find(".k-hierarchy-col,.k-hierarchy-cell").remove();
        }
    });
}

window.viewModel = viewModel;

initGrid($("#grid"), viewModel.items);

$(document).on("click", ".universalSearchGridAddExpression", function() {
    var grid = $("#grid").data("kendoGrid");
    var data = grid.dataSource.data();
    data.push({
        name: viewModel.counter++,
        subitems: [{
            name: "111",
            subitems: []},
        {
            name: "222",
            subitems: []},
        {
            name: "333",
            subitems: []}]
    });
});