I do not know what you currently have, but I tested this and it works. Since you failed to mention how you would originally begin editing the grid, I did it manually in the ready event, you just have to keep track of what row is currently being edited using the selIRow var.
var selIRow = 1; //keep track of currently edited row //initialized to 1 for testing purposes $(document).ready(function () { $("#jqGrid").jqGrid({ datatype: 'local', colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'], colModel: [ { name: 'id', index: 'id', width: 60, editable: true }, { name: 'invdate', index: 'invdate', width: 90, editable: true }, { name: 'name', index: 'name', width: 100, editable: true }, { name: 'amount', index: 'amount', width: 80, editable: true }, { name: 'tax', index: 'tax', width: 80, editable: true }, { name: 'total', index: 'total', width: 80, editable: true }, { name: 'note', index: 'note', width: 150, editable: true, //Place this code in the col options of the last column in your grid // it listens for the tab button being pressed editoptions: { dataInit: function (elem) { $(elem).focus(function () { this.select(); }) }, dataEvents: [ { type: 'keydown', fn: function (e) { var key = e.charCode || e.keyCode; if (key == 9)//tab { var grid = $('#jqGrid'); //Save editing for current row grid.jqGrid('saveRow', selIRow, false, 'clientArray'); //If at bottom of grid, create new row if (selIRow++ == grid.getDataIDs().length) { grid.addRowData(selIRow, {}); } //Enter edit row for next row in grid grid.jqGrid('editRow', selIRow, false, 'clientArray'); } } } ] } } ], }); });
Some credit goes to kajo's answer from here for the tab event.
