Geek Answers Handbook

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

I am using jqGrid and I want to integrate jQuery datePicker inside. It worked fine until I add showOn: 'button' . However, editing no longer works. I really want to pop up the collector with just the click of a button, because the date is the first cell of my row, and I use inline editing, so every row selection displays the datepixer :-(. If I use the same datepicker parameters 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"); }
+4
source share
3 answers

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

instead of embedding the datepicker in the editoptions, the on (oneditfunc) function is used.

change your colModel to the date of this

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

change the onSelectRow setting 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 the existing parameters for the datepicker parameter, the onGridEdit function will 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 will not fire at random, you can simplify the parameters of the datepicker and just let it fire when this 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 this helps, if you have syntax errors, please let me know, I use datepickers in my built-in editors.

+6
source

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

0
source

Datepicker needs to know the position of the element in the DOM, and datainit occurs before inserting the element into the DOM - this is a problem, so use the setTimeout function as follows:

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

He must solve this problem.

0
source

More articles:


All Articles