JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
<div id="example">
        <div class="demo-section k-header">
            <div class="box-col">
                <h4>Master Grid</h4>

                <div id="sampleGrid"
                    data-role="grid"
                    data-columns="[
                                 { 'field': 'ProductName', 'width': 270 },
                                 { 'field': 'UnitPrice' },
                                { title: '' }]"
                    data-bind="source: products, events: { dataBound: databound, detailInit: gridDetailInit }"
                    data-row-template="rowTemplate"
                    data-alt-row-template="altRowTemplate"
                    data-detail-template="detailTemplate">
                </div>
            </div>
        </div>

        <script id="rowTemplate" type="text/x-kendo-tmpl">
			
		    <tr data-uid='#=uid#' class="k-master-row k-row"> 
			    <td  class="k-hierarchy-cell k-counter">
                    <a href="\#" class="k-icon k-plus" style="display:none;"></a>
                </td> 		
			    <td ><span data-bind = "text:ProductName" > </span>  </td >
			    <td > #: UnitPrice#  </td>
                <td ><a  href="javascript:void(0)" data-bind="click:addNewBatch" ><i class="icon-pencil"></i>Add New Batch</a> </td>
		    </tr >
        </script>

        <script id="altRowTemplate" type="text/x-kendo-tmpl">
           <tr data-uid='#=uid#' class="k-master-row k-alt-row"> 
			    <td class="k-hierarchy-cell k-counter"> 
                    <a href="\#" class="k-icon k-plus" style="display:none;"></a>
                </td>
                <td ><span data-bind =...

JavaScript

var productList = [{
            ProductID: 1,
            ProductName: "Product1",
            UnitPrice: 10.2,
            Discontinued: true,
            UnitsInStock: 10
        }, {
            ProductID: 2,
            ProductName: "Product2",
            UnitPrice: 11.2,
            Discontinued: false,
            UnitsInStock: 20
        }, {
            ProductID: 3,
            ProductName: "Product3",
            UnitPrice: 14.5,
            Discontinued: false,
            UnitsInStock: 30
        }];

        var detailData = [
                                 { BatchId: 1, Batch: "xyz", ExpiryYear: 2016, MRP: 200, ProductID: 1 },
                                 { BatchId: 2, Batch: "abc", ExpiryYear: 2014, MRP: 250, ProductID: 1 },
                                 { BatchId: 3, Batch: "lmn", ExpiryYear: 2016, MRP: 100, ProductID: 2 },
                                 { BatchId: 4, Batch: "P2", ExpiryYear: 2016, MRP: 100, ProductID: 2 },
                                 { BatchId: 5, Batch: "P21", ExpiryYear: 2020, MRP: 100, ProductID: 2 },
                                 { BatchId: 6, Batch: "P3", ExpiryYear: 2017, MRP: 100, ProductID: 3 }

        ];

        var viewModel = kendo.observable({

            products: new kendo.data.DataSource({
                schema: {
                    model: {
                        id: "ProductID",
                        fields: {
                            ProductID: {
                                editable: false,
                                nullable: true
                            },
                            ProductName: {
                                editable: true,
                                nullable: true
                            },
                            UnitPrice: {
                                editable: true,
                                validation: {
                                    required: true
                                }
                           ...