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

Question

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 ?

Pop

Answer 1

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.

Longheaded

thank you. I tried your demo and find two issues. I updated questions and described those issues. Additionally in my testcase pressing enter to save scrolls jqgrid to leftmost position. If your testcase horizontal offset does not change. Maybe this is caused by saving to server – Pop

@Andrus: I don't see the required changes in your code of the testcase. In the invokeEditRow you use still $("#grid").jqGrid('editRow', lastSelectedRow, true, null, null, null, .... So no oneditfunc are used which should set the focus. – Longheaded

I tried your demo and double clicked in checkbox. Inline editing starts but focus is put not to checkbox which was clicked, but to first editable column. I'm looking for a way to remove unnessecary horizontal scrolling. If large number of rows are changed, this becomes annyoining. – Pop

@Andrus: Sorry, I don't understand what you want. Your testcase has no disabled controls like disabled checkboxes. I am sure that one can find more problems with some custom controls also. I wrote you before that I have very little time today. I have to implement some things today for my customers. Nevertheless I tried to help you. Instead of that you try to make some perfect demo instead of solving only the most important problems. I have to write no answer on any your questions today and make my own project only. – Longheaded

thank you. I marked yours answer as answer since removing flash on horizontally scrolled grid and catching click in checkbox check mark are not very important issues and voted up. – Pop

Your solution puts cursor to the start on input element always. How to put cursor to the character which was clicked if editing starts ? – Pop

@Andrus: In some browsers (in Google Chrome for example) the cursor will be placed at the end of input element. Moving of caret to the clicked point could be probably done like it is described here. All together should be not so easy I suppose. – Longheaded

thank you. This jquery extension function requires position as parameter. How to calculate input element character number where cursor should be placed in jqGrid double click event ? – Pop

@Andrus: You can try to use onCellSelect to do this or implement entering in the inline mode inside of beforeSelectRow or ondblClickRow. All the events has e parameter which represent event object which has information about the exact mouse position which are clicked. So in general you will have all needed information. – Longheaded

thank you. I don't have enough skills to calculate char position from mouse coordinates and it looks like there is no usable function in javascript/jquery for this. – Pop

Answer 2

My working solution:

onSelectRow: function(rowid,status,e){
                    if(rowid && rowid!==lastSel){ 
                        jQuery('#table_salary').restoreRow(lastSel); 
                        lastSel=rowid; 
                    }
                    jQuery('#table_salary').editRow(rowid, true);
                    $("input, select",e.target).focus();
                },

Notice:

• need declare variable lastSel
• table_salary - change to your table name

Vive