Forum
Log In
Home
Topic RSS
03:17
16/09/2009
Offline
my yahoo messenger id is adytmro_wbc, if you want to instant talk with me.
10:22
16/09/2009
Offline
tim said:
I've left the working example up so that others can benefit (includes re-setting the focus).
http://www.blackstag.com/json-example
tim
Tim,
Had a little difficulty finding the example source. I didn't expect it in something called json.js. 
Anyway, the source for the technique can be found in the json.js file using Firebug.
FWIW – this was copied from Firebug's Net – Response tab (and formatted just a wee bit):
...
colNames: ["NAMES","DATE"],
colModel: [{name: 'thing', index: 'thing', width: 220, hidden: false, sortable: false},
{name: 'myDate', index: 'myDate', width: 120, sortable:true, datefmt:"m/d/Y", editrules:{minValue:0, date:true},
editable:true, sorttype:"date", editoptions:{class: 'embed'}}],
height: 300,
width: 400,
afterEditCell: function (id, name, value, iRow, iCol) {
$('#'+iRow+'_'+'myDate')
.datepicker( { dateFormat:'mm/dd/yy',
showOn:'button',
buttonImage:'/css/images/calendar.gif',
buttonImageOnly:true,
onClose: function(d,e) { $(this).focus(); }
}
);
},…
And maybe this from the example HTML
<style type="text/css">
.ui-datepicker{ z-index:1200; }
.embed + img { position: relative; left: -20px; top: 3px; z-index:1200; }
</style>
Thanks for sharing the technique. Now, to see if I can get it to work for me …
DRH
12:03
* note – I only used the “.embed" to put the calendar image into the input box rather than aside it.
you don't require this.
* the onClose function just resets focus on the input box so that users can hit enter to save and move on.
if you need help let me know 
15:05
16/09/2009
Offline
Tim,
I never could get the datepicker to work using afterEditCell. However, I did get the functionallity I wanted using beforeShowForm in the navGrid() edit and add sections.
{ edit: true, add: true, del: true, refresh: true, search: true, view: true },
/* edit */ { top: 0, left: 100, width: 450, savekey: [true, 13], closeOnEscape: true,
beforeShowForm: function( formId) {
$('.MPSS-Date')
.datepicker({ duration: '',
changeMonth: true, changeYear: true,
closeText: 'Cancel', currentText: 'Today',
yearRange: '-3:+5', dateFormat: 'mm-dd-y',
showButtonPanel: true, showOn: 'button',
buttonImage: 'Images/calendar-icon.jpg',
buttonImageOnly: true,
onClose: function( sDate, dpInstance) {
$(this).focus();
}
});
}
},
I added the MPSS-Date class to the date form element after your example and used your CSS manipulation of the calendar icon (nice idea, thanks).
I'm not sure this is the best way to get the job done, but it worked.
Thanks again,
DRH
22:11
16/04/2010
Offline
Was this properly sorted?
I'm trying to do the same thing now and my jqGrid code includes:
{name:'InvDate', xmlmap:"EntryAttributes>InvDate", index:'InvDate', width:90, sorttype:'date', datefmt:'d-m-Y',editable:true,editoptions:{size:10, dataInit:function(el){ jQuery(el).datepicker({dateFormat:'dd/mm/yy', buttonImage: '/images/calendar.png', buttonImageOnly: true, autoPopUp: 'button'}); }, defaultValue: function(){ var currentTime = new Date(); var month = parseInt(currentTime.getMonth() + 1); month = month <= 9 ? "0"+month : month; var day = currentTime.getDate(); day = day <= 9 ? "0"+day : day; var year = currentTime.getFullYear(); return year+"-"+month + "-"+day; } }, formoptions:{ rowpos:1, elmprefix:"",elmsuffix:"" }, editrules:{required:true} },
Adding "showOn" just stops it from working at all.
Thanks
Most Users Ever Online: 715
Currently Online:
72 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
