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
jqGrid filter or search by date not working client-side
21/01/2011
21:18
Avatar
milimetric
Member
Members
Forum Posts: 4
Member Since:
21/01/2011
sp_UserOfflineSmall Offline

I just posted this question on stackoverflow, but figured I'd give it a shot here too:

http://stackoverflow.com/quest.....lient-side

I have an ASP.NET MVC 3 page. On it, I have a table which I turn into a jqGrid using JSON data from an ajax call. The grid has the following setup:

myGrid = $('#myGrid');
myGrid.jqGrid({
    caption: 'My Grid',
    datatype: 'local',
    data: data.rows,
    height: 250,
    pager: '#myPager',
    viewrecords: true,
    colModel: [
        ...,
        {
            label: 'blah',
            name: 'blah',
            align: 'left',
            sortable: true,
            editable: false,
            width: 85,
            formatter: 'date',
            sorttype: 'date',
            datefmt: 'm/d/Y',
            formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' }
        },
        ...
    ]
});

// turn on filter toolbar
myGrid.filterToolbar();

data.rows is returned from the ajax call. This works in all ways except one. I can paginate client-side, sort client side, and search by every field except the one I show the colModel for. This 'blah' field is a date field, and it displays the dates correctly, in mm/dd/yyyy format. However, when I type in something like 11/17/2010 into the toolbar and press enter, the search returns 0 records.

So I dug deep into the jqGrid code, and here's what it generates before it searches:

{"groupOp":"AND","rules":[{"field":"blah","op":"bw","data":"11/17/2010"}]}

Eventually, when it goes through every row and it evaluates the operation on the field, the eval(m) && p.push(this) line, m is this:

(String(this.blah).substr(0,10) == String("11/17/2010"))

Basically, it looks to me like it's not recognizing that the field is a date. It calls parse instead of parseDate. Anybody have any ideas how to fix this? I know searching server side is easy, I can just pass that string, parse it, and bam. But I'd like to stay client side if I can. I was able to duplicate this in some of the samples that Oleg and Tom put up, so it's either an issue or I'm missing something in the configuration…

21/01/2011
23:24
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello

Try this

yGrid.jqGrid({
    caption: 'My Grid',
    datatype: 'local',
    data: data.rows,
    height: 250,
    pager: '#myPager',
    viewrecords: true,
    colModel: [
        ...,
        {
            label: 'blah',
            name: 'blah',
            align: 'left',
            sortable: true,
            editable: false,
            width: 85,
            formatter: 'date',
            sorttype: 'date',
            datefmt: 'm/d/Y',
            formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' },

            searchoptions : { sopt: ['eq'] 
            },
        ...
    ]
});

Reading docs is usefull some times.

See defaultSerch

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:toolbar_searching

and colMOdel search options

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:search_config#colmodel_options

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

21/01/2011
23:56
Avatar
milimetric
Member
Members
Forum Posts: 4
Member Since:
21/01/2011
sp_UserOfflineSmall Offline

Hey thanks for the really fast response Tony.  That's a good suggestion, it helped me make progress.  The filter is now generating a more correct operation:

(jQuery.jgrid.parseDate("m/d/Y",this.blah).getTime() == 1289970000000)

The problem is, this.blah is a Date, because jqGrid stores the column internally as a date.  So when the above gets evaluated, it throws an exception during parseDate, which makes sense if this.blah is not a string.  So now it seems I just have to figure out how to tell the grid that this.blah is a date type and we're all set.

Oh, and I apologize, I forgot to mention in my original post: sorttype: 'date' in the colModel also causes the problem that you can't sort by the blah column.  It throws the same error from parseDate that I detailed above.

22/01/2011
00:25
Avatar
milimetric
Member
Members
Forum Posts: 4
Member Since:
21/01/2011
sp_UserOfflineSmall Offline

I read through the documentation very carefully, I think this is a scenario that was missed.  I figured out how to fix it, but I don't see what option I would change.  With the options that you specified, doing the following in jqGrid itself fixes the problem, but it's definitely hacky.  Add this check at the beginning of parseDate:

if (Object.prototype.toString.call(e) === '[object Date]') { return e; }
22/01/2011
16:10
Avatar
OlegK
Germany
Member
Members
Forum Posts: 1255
Member Since:
10/08/2009
sp_UserOfflineSmall Offline

Hello,

just now, after I wrote the answer on the same question on the stackoverflow.com, I read the thread. I suppose that you use an old version of jqGrid. How you can verify in the example, which I included in the answer on the stackoverflow.com, there are no exceptions which you describes.

Best regards
Oleg

24/01/2011
20:09
Avatar
milimetric
Member
Members
Forum Posts: 4
Member Since:
21/01/2011
sp_UserOfflineSmall Offline

I figured out all my problems thanks to Tom and Oleg's help.  I'm posting to summarize quickly.  Using Oleg's example from stackoverflow.com will work, but only if your source data has dates as strings.  In other words, dates have to be passed to the grid as something like "2010-09-01".

I was passing dates to the grid as javascript Date objects.  In this case, it seems the grid does not handle filtering by date columns well.  If you want to get around this problem, simply add my check from above to jqGrid's parseDate function:

if (Object.prototype.toString.call(e) === '[object Date]') { return e; }

If you'd prefer to not hack the grid itself, override that function somewhere in your own code, and call it after the check.  Hope this helps.

Dan

22/09/2011
12:19
Avatar
jberndsen
the Netherlands
New Member
Members
Forum Posts: 1
Member Since:
22/09/2011
sp_UserOfflineSmall Offline

Hi,

I am running into exactly this problem. Given that I only have the minified version of the grid available, what would the code be to override the parseDate function to overcome the problem?

Thanks in advance!

Jeroen

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
27 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