JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.core.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.calendar.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.popup.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.datepicker.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.numerictextbox.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.validator.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.data.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.binder.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.editable.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.draganddrop.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.window.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.grid.min.js"></script>
<script type="text/x-kendo-template" id="editRowTemplate">
<div>
Name: <input type="text" />
</div>
<div id="editTemplateGrid">
</div>
</script>
</head>
<body>
<div id="mainGrid">
</div>
<script language="javascript">
var i = 4;
$("#mainGrid").kendoGrid({
dataSource: {
change: function(e) {
if (e.action == "add") {
e.items[0].dirty = true;
kendo.data.ObservableObject.fn.set.call(e.items[0], "Id", i);
i++;
}
else if(e.action ==...