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 id="locationsGrid"
            data-role="grid"
            data-columns='
											        [
											        {
												        field: "LocationName",
												        title: "Location Name",
												        width: "70%"
											        },
											        {
												        title: "&nbsp",
												        width: "20%"						
											        }]'
            data-bind="source: uniqueLocations, events: { dataBound: databound, detailInit: locationDetailInit }"
            data-row-template="stepfour_one-locationrow-template"
            data-alt-row-template="stepfour_one-locationrow-alt-template"
            data-detail-template="stepfour_one-locationdetail-template">
        </div>

        <script type="text/x-kendo-template" id="stepfour_one-locationrow-template">
	        <tr data-uid='#=uid#' class="k-master-row k-row"> 
		        <td width="8%" class="k-hierarchy-cell k-counter"> 
			        <span data-bind="text: rowIndex"></span>
			        <a href="\#" class="k-icon k-plus" style="display:none;"></a>
		        </td>
		        <td width="70%" class="k-col">								 
			        <span data-bind="text: LocationName"></span>
		        </td>
		        <td width="20%" class="k-col">
			        <a class="btn" href="javascript:void(0)" data-bind="click:addLocationAvailability" ><i class="icon-pencil"></i>&nbsp;Add New Availability</a>
		        </td>
	        </tr>	
        </script>

        <script type="text/x-kendo-template" id="stepfour_one-locationrow-alt-template">
	        <tr data-uid='#=uid#' class="k-master-row k-alt-row"> 
		        <td...

JavaScript

var uniqueLocations = [
                            { LocationID: 1, LocationName: "Surat" },
                            { LocationID: 2, LocationName: "Baroda" },
                            { LocationID: 3, LocationName: "Mumbai" }
    ];

    var deatilModel = kendo.data.Model.define({
        id: "ResourceAvailabilityId",
        fields: {
            ResourceId: { type: "number" },
            ResourceName: { type: "string" },
            ResourceType: {},
            DateFrom: { type: "date" },
            DateTo: { type: "date" },
            DisplayStartTime: { type: "string" },
            DisplayEndTime: { type: "string" },
            Comments: { type: "string" }    
        }
    });

    var detailData = [
            { ResourceAvailabilityId: 1, ResourceId: 1, ResourceName: "Surat", ResourceType: "Location", DateFrom: new Date(), DateTo: new Date(), DisplayStartTime: "10:00", DisplayEndTime: "11:00", Comments: "Temporary" },
            { ResourceAvailabilityId: 2, ResourceId: 1, ResourceName: "Surat", ResourceType: "Location", DateFrom: new Date(), DateTo: new Date(), DisplayStartTime: "14:00", DisplayEndTime: "19:00", Comments: "Half Day" },
            { ResourceAvailabilityId: 3, ResourceId: 1, ResourceName: "Surat", ResourceType: "Location", DateFrom: new Date(), DateTo: new Date(), DisplayStartTime: "08:00", DisplayEndTime: "20:00", Comments: "Regular Days" },
            { ResourceAvailabilityId: 4, ResourceId: 2, ResourceName: "Baroda", ResourceType: "Location", DateFrom: new Date(), DateTo: new Date(), DisplayStartTime: "08:00", DisplayEndTime: "20:00", Comments: "Regular Days" },
            { ResourceAvailabilityId: 5, ResourceId: 3, ResourceName: "Mumbai", ResourceType: "Location", DateFrom: new Date(), DateTo: new Date(), DisplayStartTime: "08:00", DisplayEndTime: "20:00", Comments: "Regular Days" }

    ];

    var availabilityViewModel = kendo.observable({
        uniqueLocations: new kendo.data.DataSource({
            schema: {
   ...