jQuery Grid Plugin - jqGridForum

30/07/2013
22:50

zardoz

New Member

Members

Forum Posts: 1

Member Since:
30/07/2013

Offline

1

Howdy,

I did some modifications to the NextCell/PrevCell methods so that when in CellEdit mode, tab moves to the next row when it's reached the end of the current row (and vice-versa for shift+tab). This is sorta half bug, half feature request, but it certainly makes large scale data entry easier.

Here's the code:

nextCell: function (iRow, iCol) {

return this.each(function () {

var $t = this, nCol = false, i;

if (!$t.grid || $t.p.cellEdit !== true) {

return;

}

// try to find next editable cell

if (iCol + 1 != $t.p.colModel.length) {

i = iCol + 1;

}

else {

if (iRow == $t.p.reccount) {

return;

}

i = 0;

iRow++;

}

for (i; i < $t.p.colModel.length; i++) {

if ($t.p.colModel[i].editable === true) {

nCol = i;

break;

}

if (i == $t.p.colModel.length - 1) {

i = 0;

iRow++;

}

if (nCol !== false) {

$($t).jqGrid("editCell", iRow, nCol, true);

}

else {

if ($t.p.savedRow.length > 0) {

$($t).jqGrid("saveCell", iRow, iCol);

}

});

},

prevCell: function (iRow, iCol) {

return this.each(function () {

var $t = this, nCol = false, i;

if (!$t.grid || $t.p.cellEdit !== true) {

return;

}

// try to find next editable cell

if (iCol != 0) {

i = iCol - 1;

}

else {

if (iRow == 1) {

return;

}

i = $t.p.colModel.length - 1;

iRow--;

}

for (i; i >= 0; i--) {

if ($t.p.colModel[i].editable === true) {

nCol = i;

break;

}

if (i == 0) {

i = $t.p.colModel.length - 1;

iRow--;

}

if (nCol !== false) {

$($t).jqGrid("editCell", iRow, nCol, true);

}

else {

if ($t.p.savedRow.length > 0) {

$($t).jqGrid("saveCell", iRow, iCol);

}

});

},

I also added a prevent default into the tab key event into the only usage of next cell (around line 9900 of the 4.5.2 src.js file), so that pressing tab doesn't launch whatever scrollable div the grid is in to the top:

if (e.keyCode === 9) {

if(!$t.grid.hDiv.loading ) {

//EDIT

e.preventDefault();

if (e.shiftKey) {$($t).jqGrid("prevCell",iRow,iCol);} //Shift TAb

else {$($t).jqGrid("nextCell",iRow,iCol);} //Tab

} else {

return false;

}

Hope this helps someone.

PS: This is my first post here. I've been using this as a resource for months, so I thought I'd try to contribute something. Thanks for all your help!

31/07/2013
13:48

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

2

Hello,

Thank you very much for sharing your code.

Certainly I will test this and will make decision if I will include it.

Thanks again. I think that this is the way to help more people.

Kind Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

31/08/2013
09:13

ComIT Solutions

New Member

Members

Forum Posts: 2

Member Since:
17/07/2013

Offline

3

Hi zardoz,

Nice work, while finding next and previous editable cell, wouldn't it be ideal if we consider the hidden columns also (by mistake if a hidden column is set editable:true) .

like .

if ($t.p.colModel[i].editable === true && $t.p.colModel[i].hidden === false ) {

nCol = i;

break;

}

and how about adding a new row when enter-key is pressed and last editable cell of last row .

When we tried to do that, we were able to add new row using grid.jqGrid("addRowData",defcolValues,last);, but that row opened in in-line edit mode that is all the editable coulmns are showing textboxes and could not continue that row in cellEdit mode.

Any idea or guidelines are deeply appriciated.

thanks and best regards.

ComIT Solutions