Need Jqgrid Inline Editing To Have Focus Go To Clicked Cell

Others have asked this question, but there's been no good answers that I can find. No answer Oleg punted to double clicking cells With a jqgrid and inline editing, is it possible

Solution 1:

I use this code (jqGrid 4.4.1)

 onSelectRow: function (rowid, status, e) {
   var setFocusToCell = function(e) {
     if(!e || !e.target) return;
     var$td = $(e.target).closest("td"), $tr = $td.closest("tr.jqgrow"), ci, ri, rows = this.rows;
     if ($td.length === 0 || $tr.length === 0 || !rows) return;
     ci = $.jgrid.getCellIndex($td[0]);
     ri = $tr[0].rowIndex;
     $(rows[ri].cells[ci]).find("input,select").focus();
   }
   setFocusToCell(e);
}

Solution 2:

I answered on the close question here. If you use double-click to enter in the inline editing you can directly use my previous answer.

If you use selection of the row (onSelectRow callback) you will have problem to detect the cell which is clicked because the current version of jqGrid don't has the event object as the parameter. The last version of jqGrid on the github are already has the parameter (see my suggestion and the fix) and you can do the same inside onSelectRow.

If you do need to use released version jqGrid 4.3.1 and need to set focus in the onSelectRow callback you can use additionally beforeSelectRow callback to cache last e.target in a variable and uses it inside of onSelectRow.

Solution 3:

I somehow succeeded to accomplish this by attaching a dblclick event to every td of the table, I know this is not the best method, but you are free to optimize it how you like, you can also ignore the setTimeout which was used only for testing.

 $("#jqGrid").on("dblclick", "td", function (event) {   
                 //   setTimeout(function () {console.log(this);
                        $(event.target).find("input,select").focus();                     
                  //  }, 0);
                });

Hope this will help you.