Problem with JQuery datepicker inside jqGrid with showOn : 'button'

Question

Hi

I use jqGrid and I want to integrate a JQuery datePicker inside. It worked well until I add the showOn: 'button'. 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.

Please help

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 && 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");

    }

Answer 1

Which version of jquery UI do you use? Is sample online?

Answer 2

I don't have your full code so I might have some slight syntax errors but try this.

instead of embedding the datepicker in the editoptions use an on edit function (oneditfunc).

change your colModel for the date to this

{ name: 'Date', index: 'Date', width: 120, align: 'left', editable: true },

change your onSelectRow setup to this:

onSelectRow: function(id) {
    if (id && id !== lastSel) {
     jQuery('#list').restoreRow(lastSel);

         // add a function that fires when editing a row as the 3rd parameter  
     jQuery('#list').editRow(id, true, onGridEdit);//<-- oneditfunc

         lastSel = id;
    }
 },

using your existing options for the datepicker your onGridEdit function would look like this

function onGridEdit(myRowID) {
    $("#" + myRowID + "_Date").datepicker({ dateFormat: 'dd/mm/yy', 
     constrainInput: false, showOn: 'button', buttonText: '...' });

    // this will set focus on the Invested column so the datepicker doesn't fire
    $("#" + myRowID + "_Invested").get(0).focus();
}

However since the datepicker won't be firing at random you can simplify the datepicker options and just let it fire when that cell is selected.

function onGridEdit(myRowID) {
    $("#" + myRowID + "_Date").datepicker({ dateFormat: 'dd/mm/yy' })

    // this will set focus on the Invested column so the datepicker doesn't fire
    $("#" + myRowID + "_Invested").get(0).focus();
}

Hope that helps, if you have syntax errors please let me know, I am using datepickers in my inline editors.

Answer 3

You can also try with new code for jqgrid: http://github.com/tonytomov/jqGrid/commit/ccea1a282258d63305c5b90091be2ecffa3c4ab2

Answer 4

Datepicker needs to know the position of the element into the DOM and datainit is raised before inserting the element into the DOM - this is the problem, so use setTimeout function like this:

dataInit:function(elem){setTimeout(function(){ $(elem).datepicker(); }, 10); }

It should solve this problem.