JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<div id="grdQuarters">
</div>
JavaScript
var QuarterDefinition = kendo.data.Model.define({ id: "ID",
fields: {
ID: { type: "number", nullable: false, editable: false },
CompanyID: { type: "number", nullable: false, editable: false },
Quarter: { type: "string", nullable: false, editable: false },
StartDate: { type: "date", nullable: false, editable: true },
EndDate: { type: "date", nullable: false, editable: true}
}
});
var dsQuarter = [{ID:1,CompanyID:1,Quarter:'1',StartDate:new Date('1/1/2012'),EndDate:new Date('3/31/2012')},
{ID:2,CompanyID:1,Quarter:'2',StartDate:new Date('4/1/2012'),EndDate:new Date('6/30/2012')}];
$("#grdQuarters").kendoGrid(
{
dataSource: dsQuarter,
pageable: false,
editable: true,
scrollable: false,
rowTemplate: kendo.template("<tr data-uid='#=uid#'><td>#=Quarter#</td><td class='editable-field' title='Click here to edit this field'>#=kendo.toString(StartDate,'MM/dd/yyyy')#</td><td class='editable-field' title='Click here to edit this field'>#=kendo.toString(EndDate,'MM/dd/yyyy')#</td></tr>"),
altRowTemplate: kendo.template("<tr data-uid='#=uid#' class='k-alt'><td>#=Quarter#</td><td class='editable-field' title='Click here to edit this field'>#=kendo.toString(StartDate,'MM/dd/yyyy')#</td><td class='editable-field' title='Click here to edit this field'>#=kendo.toString(EndDate,'MM/dd/yyyy')#</td></tr>"),
columns: [
{ title: "Quarter", field: "Quarter" },
{ title: "Start Date", field: "StartDate"},
{ title: "End Date", field: "EndDate" }
]
}
);