Question

I have a jqGrid on a page and users can click a button to add a new row. If there are already enough rows on the page to fill the visible portion of the grid the new row is added and a scroll bar appears but the user needs to scroll to see the new row.

Is there a way to do this programmatically?

Answer 1

A quick and easy way to do this using the jqGrid API is to:

• Call editRow (which will set focus to the edited row)
• And then immediately call restoreRow (because you do not really want to edit the row)

Otherwise you should be able to use jQuery’s focus function to set focus to the row, for example: jQuery("#" + row_id).focus() – but I have not tested this method, so YMMV.

Actually focus will not scroll the grid’s div. But you can use the following code to guarantee that the grid scrolls such that the row with a given id is viewable:

function getGridRowHeight (targetGrid) {
    var height = null; // Default

    try{
        height = jQuery(targetGrid).find('tbody').find('tr:first').outerHeight();
    }
    catch(e){
     //catch and just suppress error
    }

    return height;
}

function scrollToRow (targetGrid, id) {
    var rowHeight = getGridRowHeight(targetGrid) || 23; // Default height
    var index = jQuery(targetGrid).getInd(id);
    jQuery(targetGrid).closest(".ui-jqgrid-bdiv").scrollTop(rowHeight * index);
}