2

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 ?

Andrus
  • 26,339
  • 60
  • 204
  • 378

2 Answers2

3

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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • 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 – Andrus Aug 28 '11 at 10:16
  • @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. – Oleg Aug 28 '11 at 10:59
  • 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. – Andrus Aug 28 '11 at 11:38
  • @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. – Oleg Aug 28 '11 at 12:06
  • 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. – Andrus Aug 29 '11 at 11:49
  • Your solution puts cursor to the start on input element always. How to put cursor to the character which was clicked if editing starts ? – Andrus Aug 29 '11 at 14:41
  • 1
    @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](http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area). All together should be not so easy I suppose. – Oleg Aug 29 '11 at 14:59
  • 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 ? – Andrus Aug 29 '11 at 16:01
  • 1
    @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](http://api.jquery.com/category/events/event-object/) object which has information about the exact mouse position which are clicked. So in general you will have all needed information. – Oleg Aug 29 '11 at 16:27
  • 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. – Andrus Aug 30 '11 at 07:35
0

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
menkow
  • 627
  • 1
  • 8
  • 9