title: Problem with JQuery datepicker inside jqGrid with showOn : 'button'
body: <p>I use jqGrid and I want to integrate a JQuery datePicker inside. It worked well until I add the <strong>showOn: 'button'</strong>. With that, the edit doesn't work anymore. I really want to popup the picker only on a button click because date is the 1st cell of my row and I use inline edit so every row select shows the datepicker :-(. If I use the same datepicker options outside jqGrid, it works.</p>
  
  <p>Please help</p>
  
  <pre><code>function loadGrid() {
      var getUrl = 'Transactions.aspx/GridData/?fundID=' + $('#fundID').val();
      var lastSel = "";
      jQuery("#list").jqGrid({
          url: getUrl,
          editurl: 'Transactions.aspx/Edit/',
          datatype: 'json',
          mtype: 'GET',
          colNames: ['Date', 'Invested', 'Nb Shares', 'Price'],
              colModel: [
        { name: 'Date', index: 'Date', width: 120, align: 'left', editable: true,
            editoptions: {
                size: 10, maxlengh: 10,
                dataInit: function(element) {
                    $(element).datepicker({ dateFormat: 'dd/mm/yy', constrainInput: false, showOn: 'button', buttonText: '...' });
                }
            }
        },
        { name: 'Invested', index: 'Invested', width: 100, align: 'right', editable: true, edittype: 'text' },
        { name: 'NbShares', index: 'NbShares', width: 110, align: 'right', editable: true, edittype: 'text' },
        { name: 'UnitValue', index: 'UnitValue', width: 150, align: 'right', editable: true, edittype: 'text'}],
              onSelectRow: function(id) {
                  if (id &amp;&amp; id !== lastSel) {
                      jQuery('#list').restoreRow(lastSel);
                      jQuery('#list').editRow(id, true);
                      lastSel = id;
                  }
              },
              pager: jQuery('#navbar'),
              viewrecords: true,
              height: 'auto',
              caption: 'Transactions detail'
          }).navGrid('#navbar', { edit: false, add: true, del: true });
          jQuery("input[type=text]").css("width", "2em");
          jQuery("#navbar table").css("margin", "0");
  
      }
  </code></pre>