Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Persist state - date filter error

9 Answers 269 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 1
Bob asked on 17 Mar 2015, 08:06 PM
Hi, I'm using 2014.Q3 release without service packs.  My current issue with the grid persist state feature is that it blows up when trying to retrieve any date filter values.  Any issues?  

See error and break point below:
Unhandled exception at line 702, column 1 in Function code

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'toLowerCase'

function anonymous(d, __f, __o) {
return (d.Enabled == true && (d.DateCreatedDate || '').toLowerCase() == '2015-01-22t05:00:00.000z')
}

9 Answers, 1 is accepted

Sort by
0
Bob
Top achievements
Rank 1
answered on 17 Mar 2015, 08:26 PM
I reproduced in dojo

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
 
</head>
<body>
 
        <div id="example">
            <div class="box">
                <a href="#" class="k-button" id="save">Save State</a>
                <a href="#" class="k-button" id="load">Load State</a>
            </div>
            <div id="grid"></div>
 
            <script>
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                            },
                            pageSize: 20
                        },
                        height: 550,
                        groupable: true,
                        sortable: true,
                        reorderable: true,
                        resizable: true,
                        columnMenu: true,
                        filterable: {
                            mode: "row"
                        },
                        pageable: {
                            refresh: true,
                            pageSizes: true,
                            buttonCount: 5
                        },
                        columns: [{
                            field: "OrderDate",
                            title: "Order Date",
                            width: 250,
                          type:"date"
                        }]
                    });
 
                    var grid = $("#grid").data("kendoGrid");
 
                    $("#save").click(function (e) {
                        e.preventDefault();
                        localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());
                    });
 
                    $("#load").click(function (e) {
                        e.preventDefault();
                        var options = localStorage["kendo-grid-options"];
                        if (options) {
                            grid.setOptions(JSON.parse(options));
                        }
                    });
                });
            </script>
        </div>
 
 
</body>
</html>
0
Petur Subev
Telerik team
answered on 19 Mar 2015, 03:17 PM
Hello Bob,

We assume that the problem that you experience is actually coming from the fact that when a date is stringified and then parsed backed it is no longer a JavaScript Date object. If you find a way to persist an object

{ foo: new Date() }

through serialization then just use the same approach when saving the settings of the Grid and you should not experience such issue.

Kind Regards,
Petur Subev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Bob
Top achievements
Rank 1
answered on 19 Mar 2015, 03:30 PM
So, the persist state feature doesn't support Date filters and I have to add a hack?  I already have to add hacks to persist toolbar template and header templates.
0
Petur Subev
Telerik team
answered on 20 Mar 2015, 08:07 AM
Hello again Bob,

The setOptions and getOptions do not have any issues, the issues is coming from the fact that you are using JSON.stringify to serialize the objects. If you do not this serialization the state is saved as you would expect.

Here is a modified example:

http://dojo.telerik.com/@pesho/uVeWe

http://stackoverflow.com/questions/11491938/issues-with-date-when-using-json-stringify-and-json-parse

Kind Regards,
Petur Subev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Bob
Top achievements
Rank 1
answered on 20 Mar 2015, 12:48 PM
So the sole demo for this feature uses localstorage and will not work for date filters.  Correct?

http://demos.telerik.com/kendo-ui/grid/persist-state
0
Encarni
Top achievements
Rank 1
answered on 23 Mar 2015, 08:11 AM
Hello Petur,

I have the same problem that Bob. I persist the options into localstorage this way:
localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());

And I recover options this way:
grid.setOptions(JSON.parse(localStorage["kendo-grid-options"]);

But doesn't work, I obtain the next error:
TypeError: "".toLowerCase is not a functionreturn ((d.creationDate || '').toLowerCase() == '2015-03-19t23:00:00.000z')


0
Petur Subev
Telerik team
answered on 23 Mar 2015, 02:49 PM
Hello Bob,

Yes, if there is option which is a JavaScript date the demo as it is will not work. You can search the internet for such serialization dedicated libraries and use them to stringify and restore the object instead of using the JSON built-in methods

e.g.

https://github.com/tarruda/super-json

Kind Regards,
Petur Subev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
1
Bob
Top achievements
Rank 1
answered on 23 Mar 2015, 09:12 PM
Here's my hack to preserve date filters and persist state feature work as shown on the demo site.  I take the parsed grid options, then find any date filters and convert them to javascript dates prior to actually calling setOptions on the grid.

function convertGridOptionsFilterDateStringsToDates(gridId, gridOptionsParsed) {
    if (gridOptionsParsed.dataSource.filter && gridOptionsParsed.dataSource.filter.filters)
    {
        for (filterItem in gridOptionsParsed.dataSource.filter.filters) {
            // if field is "date" data type
            if ($("#" + gridId).data("kendoGrid").dataSource.options.schema.model.fields[gridOptionsParsed.dataSource.filter.filters[filterItem].field].type === "date")
            {
                var filterValue = gridOptionsParsed.dataSource.filter.filters[filterItem].value;
 
                // if filter value is a date
                if (!isNaN(Date.parse(filterValue))) {
                    gridOptionsParsed.dataSource.filter.filters[filterItem].value = new Date(filterValue);
                }
            }
        }
    }
 
    return gridOptionsParsed;
}
0
Jay
Top achievements
Rank 1
answered on 29 Aug 2016, 08:50 PM

thanks that helped me. My report used multi-filters so I had to go one level further.

function convertGridOptionsFilterDateStringsToDates(gridId, gridOptionsParsed) {
    if (gridOptionsParsed.dataSource.filter && gridOptionsParsed.dataSource.filter.filters) {
        for (filterItem in gridOptionsParsed.dataSource.filter.filters) {
            // if field is "date" data type
            var filter = gridOptionsParsed.dataSource.filter.filters[filterItem];
            if (filter.field) {
                if ($("#" + gridId).data("kendoGrid").dataSource.options.schema.model.fields[filter.field] &&
                $("#" + gridId).data("kendoGrid").dataSource.options.schema.model.fields[filter.field].type === "date") {
                    var filterValue = filter.value;
 
                    // if filter value is a date
                    if (!isNaN(Date.parse(filterValue))) {
                        filter.value = new Date(filterValue);
                    }
                }               
            }
            else if (filter.filters.length > 0)
            {
                for (childFilterItem in filter.filters) {
                    var childFilter = filter.filters[childFilterItem];
 
                    // begin copy pasta
                    if (childFilter.field) {
                        if ($("#" + gridId).data("kendoGrid").dataSource.options.schema.model.fields[childFilter.field] &&
                        $("#" + gridId).data("kendoGrid").dataSource.options.schema.model.fields[childFilter.field].type === "date") {
                            var filterValue = childFilter.value;
 
                            // if filter value is a date
                            if (!isNaN(Date.parse(filterValue))) {
                                childFilter.value = new Date(filterValue);
                            }
                        }
                    }
                }                                      
            }
        }
    }
 
    return gridOptionsParsed;
}

and to call it I had to use 

var grid = $(sGridId).data('kendoGrid');
grid.setOptions(state);
convertGridOptionsFilterDateStringsToDates('gridId', state);
grid.dataSource.filter(state.dataSource.filter);

Tags
Grid
Asked by
Bob
Top achievements
Rank 1
Answers by
Bob
Top achievements
Rank 1
Petur Subev
Telerik team
Encarni
Top achievements
Rank 1
Jay
Top achievements
Rank 1
Share this question
or