Forum


16:31

24/08/2010

Hi,
Just to say that I love your jqgrid, I think it is pretty awesome work!
I was wondering is there an easy way to implement datepicker in the toolbar but for a range?
If I wanted to search start_date - end_date ?
I tried searching but couldn't find anything about multiple dates in the toolbar.
Thanks!
17:58

24/08/2010

Ok so I found a way to get this working.
Not sure if my method is the best way, but it seems to work for me.
Here's what I have done for those of you interested.
In grid.custom.js I have added the following:
Near
filterToolbar : function(p){ - line 518
I have opened another case and called mine "daterange"
I have put this code:
// START - DATE RANGE
case 'daterange':
v = $("input[name="+nm+"_start_date]",$t.grid.hDiv).val();
if(v) {
sdata[nm+"_start_date"] = v;
sopt[nm+"_start_date"] = so;
j++;
} else {
try {
delete $t.p.postData[nm+"_start_date"];
} catch (e) {}
}
v = $("input[name="+nm+"_end_date]",$t.grid.hDiv).val();
if(v) {
sdata[nm+"_end_date"] = v;
sopt[nm+"_end_date"] = so;
j++;
} else {
try {
delete $t.p.postData[nm+"_end_date"];
} catch (e) {}
}
break;
// END - DATE RANGE
Near line 653 in the clearToolbar portion I have put another case "daterange":
// START - DATE RANGE
case 'daterange':
$("input[name="+nm+"_start_date]",$t.grid.hDiv).val(v);
if(v) {
sdata[nm+"_start_date"] = v;
j++;
} else {
try {
delete $t.p.postData[nm+"_start_date"];
} catch (e){}
}
$("input[name="+nm+"_end_date]",$t.grid.hDiv).val(v);
if(v) {
sdata[nm+"_end_date"] = v;
j++;
} else {
try {
delete $t.p.postData[nm+"_end_date"];
} catch (e){}
}
break;
// END - DATE RANGE
And on line 854 right after the last case "text" for the stype I have put another case "daterange" with the code:
// START DATE RANGE
case 'daterange':
var df = soptions.defaultValue ? soptions.defaultValue: "";
$(thd).append("<input type='text' style='width:40%;padding:0;margin-right:5px;' name='"+(cm.index || cm.name)+"_start_date' id='gs_"+cm.name+"_start_date' value='"+df+"'/>");
if(soptions.attr) {$("input",thd).attr(soptions.attr);}
if(soptions.dataInit !== undefined) { soptions.dataInit($("input",thd)[0]); }
if(soptions.dataEvents !== undefined) { bindEvents($("input",thd)[0], soptions.dataEvents); }
if(p.autosearch===true){
if(p.searchOnEnter) {
$("input",thd).keypress(function(e){
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if(key == 13){
triggerToolbar();
return false;
}
return this;
});
} else {
$("input",thd).keydown(function(e){
var key = e.which;
switch (key) {
case 13:
return false;
case 9 :
case 16:
case 37:
case 38:
case 39:
case 40:
case 27:
break;
default :
if(timeoutHnd) { clearTimeout(timeoutHnd); }
timeoutHnd = setTimeout(function(){triggerToolbar();},500);
}
});
}
}
var df = soptions.defaultValue ? soptions.defaultValue: "";
$(thd).append("<input type='text' style='width:40%;padding:0px;' name='"+(cm.index || cm.name)+"_end_date' id='gs_"+cm.name+"_end_date' value='"+df+"'/>");
if(soptions.attr) {$("input",thd).attr(soptions.attr);}
if(soptions.dataInit !== undefined) { soptions.dataInit($("input",thd)[1]); }
if(soptions.dataEvents !== undefined) { bindEvents($("input",thd)[1], soptions.dataEvents); }
if(p.autosearch===true){
if(p.searchOnEnter) {
$("input",thd).keypress(function(e){
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if(key == 13){
triggerToolbar();
return false;
}
return this;
});
} else {
$("input",thd).keydown(function(e){
var key = e.which;
switch (key) {
case 13:
return false;
case 9 :
case 16:
case 37:
case 38:
case 39:
case 40:
case 27:
break;
default :
if(timeoutHnd) { clearTimeout(timeoutHnd); }
timeoutHnd = setTimeout(function(){triggerToolbar();},500);
}
});
}
}
break;
// END DATE RANGE
To use it I put this in the column configuration:
search: true,
stype: "daterange",
searchoptions: {
dataInit: function (elem) {
$(elem).datepicker({ dateFormat: "yy-mm-dd" });
},
dataEvents: [
{
type: "change",
fn: function(e){
$("#list")[0].triggerToolbar();
}
}
],
attr: {
title:"Select Date"
}
},
What it basically does it add 2 input fields with the same code as text case but instead appends at the end of the name _start_date and _end_date. And when I do my searches, I look for the column_start_date and column_end_date.
Mind you I haven't fully tested this. It works for me when I do searches, but I haven't used it with all the toolbar search methods you can do. I use the easy method where I just grab the submitted data and do my own comparisons without using any of the parameters available.
I am always open for a better solution on this. I don't recommend anyone using this work around that I am using.
Most Users Ever Online: 715
Currently Online:
41 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