Persist state - date filter error

10 posts, 0 answers
  1. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 17 Mar 2015 Link to this post

    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')
    }
  2. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 17 Mar 2015 in reply to Bob Link to this post

    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>
  3. Kendo UI is VS 2017 Ready
  4. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 19 Mar 2015 Link to this post

    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!
     
  5. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 19 Mar 2015 in reply to Petur Subev Link to this post

    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.
  6. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 20 Mar 2015 Link to this post

    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!
     
  7. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 20 Mar 2015 in reply to Petur Subev Link to this post

    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
  8. Encarni
    Encarni avatar
    7 posts
    Member since:
    May 2012

    Posted 23 Mar 2015 Link to this post

    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')


  9. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 23 Mar 2015 Link to this post

    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!
     
  10. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 23 Mar 2015 in reply to Petur Subev Link to this post

    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;
    }
  11. Jay
    Jay avatar
    4 posts
    Member since:
    Oct 2015

    Posted 29 Aug in reply to Bob Link to this post

    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);

Back to Top
Kendo UI is VS 2017 Ready