Search code examples
jqgrid

How to set focus to cell which was clicked to start inline edit in jqgrid

In jqgrid inline editing is stared by double clicking in a cell. Cursor is positioned to first editable column. Second click in required to place cursor to the cell which was clicked.

How to put cursor to the cell which was clicked to start inline edit? In cell edit mode clicked cell receives focus properly.

function beginInlineEdit(rowID, afterSave) {
    var grid2 = $("#grid");
    if (rowID && rowID !== lastSelectedRow) {
        var scrollPosition = $("#grid").closest(".ui-jqgrid-bdiv").scrollLeft();
        cancelEditing($("#grid"));
        lastSelectedRow = rowID;
        setTimeout(function () {
            grid2.closest(".ui-jqgrid-bdiv").scrollLeft(scrollPosition);
        }, 100);
    }
    $("tr#" + lastSelectedRow + " div.ui-inline-edit, " + "tr#" + lastSelectedRow + " div.ui-inline-del").hide();
    $("tr#" + lastSelectedRow + " div.ui-inline-save, " + "tr#" + lastSelectedRow + " div.ui-inline-cancel").show();

    $("#grid").jqGrid('editRow', lastSelectedRow, true, null, null, null,
                 { _dokdata: FormData },
                 afterSave,
                 errorfunc,
                 function () {
                     cancelEditing($("#grid"));
                     setFocusToGrid();
                 }
             );
}

Update 1

I tried Oleg demo in IE9. Issues:

  1. double-clicking in checkbox column still puts focus to first column.

  2. I decreased browse window width and scrolled right. Clicking in righmost column causes strange rapid flashing: grid scrolls to leftmost position and after that back to right position.

How to fix those issues ?

Solution

  • Look at the demo from the answer. Either the demo do exactly what you need or you can modify the demo to your purposes.

    UPDATED: 1) Do you tried my original demo or you tried to use the described idea in your code? In my environment (on different computers) the demo put the focus in the clicked cell. It works correct in IE9 (in native and even in the compatibility mode), IE8, Google Chrome 13, Safari 5.1, Opera 11.50, Firefox 3.6.20 and Nightly 9.0a1 (next version of Firefox).

    2) The scrolling grid at the first editing position first and then to the clicked cell is the correct behavior. Per default jqGrid inline editing set the focus on the first editing cell and then, inside of oneditfunc callback function of editRow, we change the focus to clicked cell.