Kendo - save grid filters via code on the page has issues only with the date filter grid columns

Question

I have a kendo grid on my web page and I am trying to programatically save the grid filters using the sessionStorage and this is working for the most part.

The issue I am having is that when I place a filter on a date column, when I try to re-apply that filter when the user navigates back to that page, it errors out in one of the anonymous functions b/c the toLowerCase() method does not exist. The filter works fine if I am filtering on a string column. I can apply multiple filters and save them to a sessionStorage var and reapply to the grid just fine. Only with date columns am I having issues.

It took me a while to figure out how to get the kendo grid filters using the syntax:

var theKgridFilters = $("#gridList").data("kendoGrid").dataSource.filter();

Then to store it in a sessionStorage var, I had to stringify() the object or else it would not hold the grid filters in that var:

sessionStorage.setItem('theGridFilters', JSON.stringify(theKgridFilters));

Next, to reapply the filter on the grid, I had to convert the string back to a JSON object b/c the filter is an object with attributes, so I used this:

if (sessionStorage.theGridFilters) {                            
    gridFilter = sessionStorage.theGridFilters;
    gridFilter = $.parseJSON(gridFilter);
}

Which gets applied to the grids dataSource filter attribute:

filter: gridFilter, 

When I filter the grid on a date column, the error throws on this line below:

function anonymous(d, __f, __o) {
    return (d.Last_Modified_Date.toLowerCase() == '2013-01-25t06:00:00.000z')
}

Where the field that has the filter is Last_Modified_Date. I'm fairly new to working with jQuery, JS, etc., and from what I've read, the anonymous() fns are created on the fly, so I don't believe I can change this.

I checked online and someone mentioned to add toString() function before the toLowerCase(). I tried it in the debugger and it worked but I'm not sure how to access this via the code to make that change. It looks like the anonymous function is called from the kendo.web.js file based on the call stack of the IE debugger.

Also, the value of the date field in the debugger is shown below:

d.Last_Modified_Date    Wed Jan 25 00:00:00 CST 2013    Object, (Date)

So I'm not even sure if it can equate that value to the string in the anonymous fn above, which is: '2013-01-25t06:00:00.000z'.

Please let me know if anyone has any insights to get around this date filter save issue. It's driving me insane. Maybe there's another way that I'm not aware of to save the grid filters.

Thanks in advance, Bruce!

Answer 1

The reason you are observing this behavior is that JSON.parse doesn't create JavaScript Date objects. It creates strings instead:

typeof $.parseJSON(JSON.stringify(new Date())); // "string"

The Kendo UI framework then tries to filter dates as strings hence the error.

The workaround is to use specify a reviver:

 function dateReviver(key, value) {
    var a;
    if (typeof value === 'string') {
        a = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
        if (a) {
            return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],
                            +a[5], +a[6]));
        }
    }
    return value;
 }

 gridFilter = JSON.parse(gridFilter, dateReviver);