JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

$("#grid").kendoGrid({
    dataSource: {
        data: [{
            FirstName: "Joe",
            LastName: "Smith"},
        {
            FirstName: "Jane",
            LastName: "Smith"}]
    },
    selectable: "multiple",
    columns: [
        {
        field: "FirstName",
        title: "First Name"},
    {
        field: "LastName",
        title: "Last Name"}
    ],

    detailInit: detailInit

});

function detailInit(e) {
    var dataitem =e
    alert(e);
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            data: [{
                FirstName: "Chanaka",
                LastName: "Jayarathna"},
                {FirstName: "Damith",
                LastName: "Dananjaya"}]
        },
        scrollable: false,
        sortable: true,
        pageable: true,
        selectable: "multiple",
        columns: [
        {
        field: "FirstName",
        title: "First Name"},
    {
        field: "LastName",
        title: "Last Name"}
    ],
    });

    }