how to disable the automatic focus on jqGrid row when it is changed to edit mode

Question

In my grid, when the "Add" button on grid toolbar is clicked, a new empty row will be added into grid. Also, all rows will be changed to edit mode.

My problem is that there is an automatic focus on row when it is changed to edit mode. I change the mode of row from the top of grid to the bottom. So the grid always focus to the row on the bottom when the change finishes. But the new empty row is at the top of grid. So user cannot see the new empty in case of there are many rows in grid.

Here is my function to change row to edit mode:

    function Grid_EditMode(event, grid) {
    var g;
    if (grid !== null && grid !== undefined) {
        g = grid;
    } else {
        g = $(this);
    }

    HideFilterRow(g);

    var ids = g.jqGrid('getDataIDs');

    for (var i = 0; i < ids.length; i++) {
        var cl = ids[i];
        g.editRow(cl);
    }

    g.jqGrid('resetSelection');

    $('input[id*=Date]').datepicker();
    $('input[id*=Date]').dateEntry({ spinnerImage: '' });
    //change button status
    $('#pager' + g.attr('id') + " [id*='btnGridAdd']").removeClass('pagerBtn');
    $('#pager' + g.attr('id') + " [id*='btnGridEdit']").removeClass('pagerBtn');
    $('#pager' + g.attr('id') + " [id*='btnGridDelete']").removeClass('pagerBtn');
    $('#pager' + g.attr('id') + " [id*='btnGridReset']").removeClass('pagerBtn');
    $('#pager' + g.attr('id') + " [id*='btnGridEdit']").addClass('pagerBtn');

}

Is there any way to disable the focus when changing the row to edit mode?

Note that this problem only occurs on IE, not on chrome. I'm using the jqGrid 4.5.2

Answer 1

jqGrid 4.5.2 is very old version. It was published 2.5 years ago. editRow supports focusField parameter starting with version 4.7. If could be Boolean or Number (column index) in jqGrid 4.7. Free jqGrid allows the usage of String (column name) and, starting with 4.10.0, Event or DOM element as the value of focusField parameter (see the answer and this one ).

In your case one can use focusField: true option of editRow . You need just change g.editRow(cl); to g.editRow(cl, {focusField: false}); if you would use jqGrid 4.7 or higher. I would recommend you to use the latest version (4.10.0) of free jqGrid. If you can't upgrade to newer version of jqGrid then you can set the focus to another editing field manually after the last call of editRow . You can add the following code after the loop where you call editRow

$("#" + ids[0])
    .find("input,textarea,select,button,object,*[tabindex]")
    .filter(":input:visible:not(:disabled)")
    .first()
    .focus();

$("#" + ids[0]) get the first row ( <tr> ), then one find all child elements which can have focus, filter for visible and not disabled elements and finally set the focus on the first from the elements.