Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_TopicIcon
Toolbar + DatePicker
24/08/2010
16:31
Avatar
kheang
Member
Members
Forum Posts: 12
Member Since:
24/08/2010
sp_UserOfflineSmall Offline

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!

24/08/2010
17:58
Avatar
kheang
Member
Members
Forum Posts: 12
Member Since:
24/08/2010
sp_UserOfflineSmall Offline

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. 

Forum Timezone: Europe/Sofia

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.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information