jqgrid edit and add rows with "tab" key - jqgrid

Question

I'm new to jqgrid , and I'm trying to navigate through the grid with "tab" key.
I want to be able to edit a row, and when I'm editing the last cell in that row, if I click the tab key it will save the current row changes (in the client side , and not by clicking enter) and set the focus to the next row and edit it's cells , and when I get to the last row and cell, the tab click will add a new row and make it in edit mode.
I tried with in line editing and then with cell editing but always got stuck...
how can this be done?
Thanks in advance.

Answer 1

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.