How to scroll with jqGrid cell editing on editrow call?

Question

I've set up my jqGrid to use cell editing, and I've bound some keys for navigation.

Up and down arrows will call edit row on the previous or next row, and it works great. Only problem is if I get to the end of the visible records, it does not scroll to keep up.

I've tried setting scrollrows: true in the grid options, but that only seems to work for selecting a whole row, and not a cell.

Anyone have to deal with this before? I'm not very experienced with scrolling and javascript/jquery, so I don't have an out of the box solution for this.

Thanks for any suggestions!

EDIT: Here is a fiddle to help debug. To see the problem, click on the "Thingy" column, the use the down arrow to navigate.

I suggest adding some code to demonstrate your problem, either here or online somewhere like jsBin or jsFiddle. — Sam Tyson, May 16 '12 at 21:24

score 1 · Accepted Answer · answered May 22 '12 at 20:21

1

The editNewCell function may be modified to use setSelection to ensure the newly edited row is visible:

function editNewCell(iRow, iCol) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    grid.editCell(iRow, iCol, true);

    var selRow = grid.getGridParam('selrow');
    grid.jqGrid('setSelection', selRow );
};

Here is a jsfiddle with the change, if you would like to try it out.

answered May 22 '12 at 20:21

Justin Ethier

131,333
52
229
284

Looks good to me. On my actual grid, it slows down the movement between rows a tad, but definitely usable. Thanks! – IronicMuffin May 23 '12 at 13:31
@IronicMuffin - You're welcome. No rush, but if you are satisfied with this answer please consider awarding your bounty :) – Justin Ethier May 24 '12 at 14:47
@justcurious - Your updated fiddle does not address the requested problem: `I just want the grid to scroll when I reach the bottom of the visible records, so don't have to take my hands off the keyboard and scroll with the mouse` – Justin Ethier May 24 '12 at 19:50
Correct regarding the addressing of the problem. Also, Justin, I planned to award the bounty to you, I just couldn't for the first 5 hours. Should be all set now. Thanks for the help! – IronicMuffin May 24 '12 at 20:43

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

I'm not sure I got it right. What do you mean by "if I get to the end of the visible records, it does not scroll to keep up."? Do you mean that once you reach the top/bottom row you cannot go any further OR do you mean that in a row if you keep scrolling horizontally and once you cross the end of visible records your edit mode goes away.

I have similar excel like gridedit implementation where i have the up and down arrow navigation in edit mode for cell edit. The link in the first paragraph will take you to the jsfiddle sample. In the javascript section look for HandleInputNavigation function. I have tied the keydown event in the colModel under the column's editoptions to the HandleInputNavigation function. Thats where I handle the up/down navigation.

UPDATED 5/24: Here is how your code should look like:

    if (iRow && iCol) {
    var isShift = window.event.shiftKey ? true : false;
    var top = 1; //UPDATED
    var bottom = grid.getGridParam('reccount');
    var left = 0;
    var right = grid.getGridParam("colNames").length - 1;

    switch (key) {

    case 38:
            // up
        if (iRow === top) saveCell(iRow, iCol); //UPDATED
        else editNewCell(iRow - 1, iCol);
        break;

    case 40:
            // down
        if (iRow === bottom) saveCell(iRow, iCol); //UPDATED
        else editNewCell(iRow + 1, iCol);
        break;
    ...
    ...

UPDATED FIDDLE

edited May 23 '17 at 12:28

Community

1
1

answered May 17 '12 at 16:36

justcurious

186
1
7

I'm saying if I keep pressing the down arrow, and I have records that are in the scrollable (overflow) space below, it will continue to activate edit mode on them, but the grid will not scroll so that they are viewable. Is that clear? I just want the grid to scroll when I reach the bottom of the visible records, so don't have to take my hands off the keyboard and scroll with the mouse. – IronicMuffin May 17 '12 at 19:00
@IronicMuffin: Have you looked at the [jsfiddle sample](http://jsfiddle.net/justcurious/qLQRA/) i posted above? Just change the jqgrid height to "100" from "100%" to simulate your scenario. you will see that the vertical scrolling works just fine. Try it on the *Client*, *Amount*, *Tax* or *Total* column. They are editable. The cell have to be double clicked to put them in edit mode...it is a custom modification. – justcurious May 17 '12 at 19:53
Yes, I took a look, and see that it works, but I don't see where you adjust the scroll in HandleInputNavigation. – IronicMuffin May 17 '12 at 20:06
@IronicMuffin: I've set the height to "150" so you don't have to change anything in the sample. – justcurious May 17 '12 at 20:12
@IronicMuffin: you shouldn't have to do anything to bring the row into the viewable area. Your custom code must be interfering with jqgrid's natural flow. Unless you post your code it will be hard to give you a solution. – justcurious May 17 '12 at 20:15
Fair enough...I'll try and get a simple example up tomorrow. – IronicMuffin May 17 '12 at 21:10
It took me a little while, but I added a fiddle to take a look at. – IronicMuffin May 22 '12 at 14:03
@IronicMuffin: your navigation code in the jsfiddle is just fine. it is just a minor index issue. You had set top to 0 but then you used the bottom to be bottom = grid.getGridParam('reccount') which considers that your top index is 1. I've updated my answer above. – justcurious May 24 '12 at 19:49
Yes, I actually just noticed and fixed that bug today. Thanks! – IronicMuffin May 24 '12 at 20:41

How to scroll with jqGrid cell editing on editrow call?

2 Answers2