Take the 2-minute tour ×

Our web application uses jqGrid for data entry, and data is edited inline and in rows.

A customer wishes a more "Excel-like" experience so that when switching a row to inline editing by clicking on a cell, that cell receives the focus (currently, the first cell in the row gets the focus).

share|improve this question

4 Answers 4

up vote 0 down vote accepted

Unfortunately the grid can only set focus to the first editable field in the row. You can see this in the source code of grid.inlinedit.js. Here it figures out the index of the row to set focus to, by iterating over them and finding the first one:

if(cm[i].editable===true) {
    if(focus===null) { focus = i; }

and later on it sets focus:

$("td:eq("+focus+") input",ind).focus();

Which selects the element at the index stored in the focus variable - for reference, see the :eq selector docs.

That said, if you are so inclined you could edit this section of code to add your own custom logic to control which element receives focus...

share|improve this answer
Any update to this answer? –  MTAG11 Jan 24 '13 at 14:55

I ran into the same issue. Very frustrating. I modified the jquery.jqGrid.js file to accommodate setting focus on the cell clicked on.

In my editRow function I added the following code:

function editRow(id, row, col, z)
    grid.jqGrid("editRow", id, true, function ()
        var f = $("input, select", z.target).focus();

        return f;

This will create a variable f that will ultimately be passed to the "oneditfunc" in $.jgrid.extend

The problem is in the setTimeout function.


as this gets executed with focus set to the first editable field from the .each function above. This would be a great place to pass in a focus index, but not possible.

// End compatible
return this.each(function ()
    var $t = this, nm, tmp, editable, cnt = 0, focus = null, svr = {}, ind, cm, bfer;

I then added the following code. (The line with >>> is unchanged. It is only there to help you find the insertion point in the code.)

    >>>     $($t).triggerHandler("jqGridInlineEditRow", [rowid, o]);

    if ($.isFunction(o.oneditfunc))
        // modified to allow for setting focus on the 
        // field clicked on

        // sets a return value.  this was added to the original code.  if using
        // legacy code, should see no change as r will be undefined
        var r = o.oneditfunc.call($t, rowid);

        // if get a return value, this indicates you want to set focus
        if (r && r[0])
            var focusIndex = focus;
            var i = 0;

            // look for the field name that was clicked on
            // cm, which is built above, has no index value associated
            // with it, so we must keep track of
            var focusField = $.grep(cm, function(c)
                // find the field name which was clicked on
                if (c.name == r[0].name)
                    focusIndex = i;


                return c.name == r[0].name;

            // if the field is editable, then update focus index
            // which is defined above
            if (focusField[0].editable)
                focus = focusIndex;

The most elegant solution? Probably not, but it does allow all legacy code to work and figure out which field was clicked on so can set focus

share|improve this answer
seems pretty ideal to me, works nicely! –  Mark Walters 2 days ago

I agree with Justin that jqGrid has no direct support of the behavior which you need. The way ich which you can receive which is need can be more complex as just one option of jqGrid. Look at the code from the answer. I hope it will help you.

share|improve this answer

This is serious deficiency in jqGrid. If grid is wider than window, you also need to scroll right to make clicked cell visible. For this you can use code from http://www.trirand.com/blog/?page_id=393/help/inline-edit-problem-with-scrolling/

        if (rowID && rowID !== lastSelectedRow) {
           var scrollPosition = 0;
           scrollPosition = grid2.closest(".ui-jqgrid-bdiv").scrollLeft();
            grid2.jqGrid('restoreRow', lastSelectedRow);
            grid.jqGrid('editRow', rowID, true);
            lastSelectedRow = rowID;
share|improve this answer

Your Answer


