JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<div id="stocks_tbl" tabindex="0">
JavaScript
$(document).ready(function () {
$(document).on('keypress','body',function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
// event.stopPropagation();
// event.preventDefault();
var grid = $("#stocks_tbl").data("kendoGrid");
grid.addRow();
//alert('You pressed a "enter" key in textbox');
//$('#additem').click();
}
});
// Class for saving and restoring an Object
function SaveObject(obj) {
// Saved Object
this.object = null;
// Save Object
this.set = function (obj) {
this.object = obj;
};
// Retrieve saved Object
this.get = function () {
return this.object;
};
this.set(obj);
};
//kendo.culture("en-US");
var entries = [
{ "id":"1", "Task":"Hello task1", "Description":"Description1","Estimate":20,"Comments":"Comments1" }
];
var savedArray = new SaveObject(entries);
var stocksDataSource = new kendo.data.DataSource({
transport:{
read:function (options) {
/*for (var i = 0; i < entries.length; i++) {
entries[i].total = entries[i].price * entries[i].shares;
}*/
return options.success(entries);
}
},
schema: {
model: {
fields: {
id:{type:"number"},
Task: { validation: { required: false } },
Description: { validation: { required: false } },
Estimate: { type: "number", validation: { min: 0, required: false } },
Comments: { validation: { required: false } }
}
}
},
pageSize:10
});
var grid = $("#stocks_tbl").kendoGrid({
dataSource:stocksDataSource,
columns: [
{ field: "id", title: "id", format: "{0:n0}", width: "40px" },
{ field: "Task", title: "Task", width: "120px" },
{...