CODEWITHSUNDEEP
javascriptjqueryjqgridscroll
IronicMuffin
IronicMuffin

Reputation: 4192

How to scroll with jqGrid cell editing on editrow call?

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.

Upvotes: 1

Views: 1975

Answers (2)

justcurious
justcurious

Reputation: 186

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

Upvotes: 0

Justin Ethier
Justin Ethier

Reputation: 134217

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.

Upvotes: 1

Related Questions