CODEWITHSUNDEEP
jquery-uijqgrid
mberube.Net
mberube.Net

Reputation: 2170

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

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

    }

Upvotes: 4

Views: 13692

Answers (3)

free4ride
free4ride

Reputation: 1643

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.

Upvotes: 0

jmav
jmav

Reputation: 3149

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

Upvotes: 0

Bobby Borszich
Bobby Borszich

Reputation: 11767

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.

Upvotes: 6

Related Questions