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('keyup','#stocks_tbl',function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
var grid = $("#stocks_tbl").data("kendoGrid");
grid.addRow();
}
});
*/
$(document).on('keyup', '[role=grid]', function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
var td = $(event.target).closet('td');
var tr = $(td).closet('tr');
if(tr.hasClass('.k-grid-edit-row')) {
var nextInput = $('input', td.siblings('td')).first();
if(nextInput){
$(nextInput).focus();
} else {
var kendoGrid = $(event.currentTarget).closet('[data-role=grid]').data('kendoGrid');
kendoGrid.addRow();
}
}
}
});
function SaveObject(obj) {
this.object = null;
this.set = function (obj) {
this.object = obj;
};
this.get = function () {
return this.object;
};
this.set(obj);
};
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) {
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" },
...