JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.blueopal.min.css">
<div id="grid">
    <script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr class="k-master-row"> 
        <td class="k-hierarchy-cell"><a href="\#" class="k-icon k-plus"></a></td>
        <td> #= FirstName # </td>
        <td> #= LastName # </td> 
    </tr>
</script>

    <script id="detailTemplate" type="text/x-kendo-tmpl">
        <div class="detail">
        <input type="text" data-bind="value:FirstName"></input>
        </div>
    </script>
    
</div>

JavaScript

var Person = kendo.data.Model.define({
    fields: {
        FirstName: {
            type: "string",
            validation : 
            {
                required:{message:'f name is required!!!'},
            }
        },
        LastName: {
            type: "string"
        }
    }
});

// Define a DataSource
var peopleDataSource = new kendo.data.DataSource({
    data: [
        { FirstName: "John", LastName: "DeVight" },
        { FirstName: "Wendy", LastName: "Parry"}],
    schema: {
        model: Person
    }
});

$("#grid").kendoGrid({
     columns:[
              {
                  field: "FirstName",
                  title: "First Name"
              },
              {
                  field: "LastName",
                  title: "Last Name"
              }
     ],
    
    dataSource: peopleDataSource,
    editable:true,
    //rowTemplate:kendo.template($("#rowTemplate").html()),
    //detailTemplate: kendo.template($("#detailTemplate").html()), 
    //detailInit:createDetail   
});


function createDetail(e)
{
    //alert('in');
    var detailRow = e.detailRow;
    var masterRow = e.masterRow;
    var originalModel = e.data; //keep reference to the model
    var grid = this;
    var viewCollection = grid.dataSource.view();
    //console.log(detailRow);
    var detailDiv = $(detailRow).find('.detail');
    //console.log(e);
    
    kendo.bind(detailDiv, originalModel);
}