title: jqGrid set focus to clicked cell AND implement datepicker in IE and Firefox
body: <p>Apologies if this has been answered already. There are a number of questions around this but I can't quite get what I'm after.</p>
  
  <p>I have a jqGrid. The first cell has a datepicker attached (on the fly when the cell is edited, not in the initial grid definition).</p>
  
  <p>When I double click on a cell in the middle of the grid, I want it to go into edit mode, sets focus to that clicked cell and not fire the datepicker (as I didn't double click in it)</p>
  
  <p>With the code below I have achieved what I want in <strong>Firefox</strong>. This is based on Olegs (and others) excellent posts on the topic.</p>
  
  <p>Howevever, in <strong>IE9</strong>, although it sets focus as required, it also fires the datepicker in the first cell.</p>
  
  <p>I understand that by default the jqGrid automatically moves to the first cell, therefore firing the datepicker if it exists, regardless of whether I double clicked it. Maybe as a workaround I will need to create some kind of tiny dummy cell in the first position, but first I would like to take this opportunity to learn more.</p>
  
  <p>Here is some abbreviated jqGrid code, you will recognise bits and pieces from Oleg and other peoples posts. Sorry I cannot give you the exact version of jqGrid at this point, suffice to say I downloaded it early October 2012.</p>
  
  <p>I'll just say I don't fully understand the event order that is gong on - on first glance it appears that the datepicker is being attached(?) <em>before</em> the clicked field is getting focus anyway.</p>
  
  <p>As an aside this is inside a MVC ASP.Net project. I find it amusing and ironic that the only way I can get a useful grid control in MVC / ASP.Net is to start learning Javascript.</p>
  
  <pre><code>$(document).ready(
      function () {
          var lastsel;
          $("#ts").jqGrid({
              //=============
              // Grid Setup
              url: 'Timesheet/GridData/',
              datatype: 'json',
              mtype: 'GET',
              colNames: ['Date', 'Customer', 'Project', 'Description', 'Hours', '$'],
              colModel: [
                { name: 'tsdate', index: 'tsdate', width: 80, editable: true },
                { name: 'Customer', index: 'Customer', width: 250, align: 'left', editable: true, edittype: "select", editoptions: { dataUrl: 'Timesheet/CustomerList'} },
                { name: 'Project', index: 'Project', width: 250, align: 'left', editable: true, edittype: "select", editoptions: { dataUrl: 'Timesheet/ProjectList'} },
                { name: 'Desc', index: 'Desc', width: 300, align: 'left', editable: true },
                { name: 'Hours', index: 'Hours', width: 50, align: 'left', editable: true },
                { name: 'Charge', index: 'Charge', edittype: 'checkbox', width: 18, align: 'center', editoptions: { value: "0:1" }, formatter: "checkbox", formatoptions: { disabled: false }, editable: true }
              ],
              //=============
              // Grid Events
              // when selecting, undo anything else
              onSelectRow: function (rowid, iRow, iCol, e) {
                  if (rowid &amp;&amp; rowid !== lastsel) {
                      $('#ts').jqGrid('restoreRow', lastsel);
                      lastsel = rowid;
                  }
              },
              // double click to edit
              ondblClickRow: function (rowid, iRow, iCol, e) {
                  // Go into edit mode (automatically moves focus to first field)
                  $('#ts').jqGrid('editRow', rowid, true, onGridEdit);
                  // Now set focus on selected field
                  if (!e) e = window.event; // get browser independent object
                  var element = e.target || e.srcElement
                  $("input, select", element).focus();
              },
              postData:
                  {
                      startDate: function () { return $('#startDate').val(); }
                  }
          }); // END jQuery("#ts").jqGrid
  
          // This is called when the row is double clicked
          function onGridEdit(RowID) {
              // onGridEdit is attached as the 'edit function' in the call to .jqGrid('editRow' above
              // Attach the datepicker to the tsdate field. For some reason this needs to be in the edit function
              // And does not work in IE 9. In IE9 it fires the datepicker. In Firefox it only fires when the field
              // gets the focus
              $("#" + RowID + "_tsdate").datepicker({ dateFormat: 'yy-mm-dd' });
          }
  
      });           // END $(document).ready
  </code></pre>
  
  <p><strong>SOLUTION</strong> when comparing debugging between Firefox and IE9 it appeared that the firefox events ran sequentially and the the IE9 ones did not.</p>
  
  <p>Regardless, the final solution as suggested by Oleg was to wrap the oneditfunc function in a setTimeout function:</p>
  
  <pre><code>            ondblClickRow: function (rowid, iRow, iCol, e) {
                  if (!e) e = window.event; //evt evaluates to window.event or inexplicit e object, depending on which one is defined
                  var element = e.target || e.srcElement
  
                  // Go into edit mode (automatically moves focus to first field)
                  $(this).jqGrid(
                      'editRow',
                      rowid,
                      {
                          keys: true,
                          oneditfunc: function (rowId) {
                              setTimeout(function () {
                                  $("input, select", element).focus();
                                  $("#" + rowId + "_tsdate").datepicker({ dateFormat: 'yy-mm-dd' });
                              }, 50);
                          }
                      }
                  ); // end jqGrid call
  
              },  // end ondblClickRow event handler
  </code></pre>