Persist Grid's state func has troubles with DateTime

[Ota]

Hi all,

I'm trying to implement persist state functionality in you Grid. I've followed this example.

localStorage["kendo-grid-orders-options"] = kendo.stringify(grid.getOptions());
.
.
.
grid.setOptions(JSON.parse(localStorage["kendo-grid-orders-options"]));

Everything works fine except for one detail. When I set a filter on DateTime field and then refresh the page, it throws an internal error in method.

The binary operator GreaterThanOrEqual is not defined for the types 'System.DateTime' and 'System.String'.

It's caused by the date in FilterDescriptor in DataSourceRequest, which is sent as a string instead of a DateTime (pict2). When it's sent directly from the filter (not from the stored options), it works correctly (pict1). Am I able to store not just the filter value, but also the information about the type?

[Konstantin Dikov]

Hi Ota,

You could try the workaround suggested in the following forum thread:

• https://www.telerik.com/forums/persist-state---date-filter-error

Below is the relevant part:

<script>
    $(function () {
        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 = JSON.parse(localStorage["kendo-grid-options"]);
            var parsedOptions = convertGridOptionsFilterDateStringsToDates('grid', options); //"grid" is the ID of the Grid
            if (options) {
                grid.setOptions(parsedOptions);
            }
        });
    });

    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;
    }
</script>

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik

[Ota]

Hello Konstantin,

thank you for your reply. However, if this is the only recommended way, I still find my current workaround on the server-side better. Maybe, someone else finds it useful.

private static void ConvertDatesToDateTime(IList<IFilterDescriptor> descriptors)
{
   var length = descriptors.Count;
   for (int i = 0; i < length; i++)
   {
      if (descriptors[i] is CompositeFilterDescriptor composite)
      {
         ConvertDatesToDateTime(composite.FilterDescriptors);
      }
      if (descriptors[i] is FilterDescriptor filter)
      {
         if (DateTime.TryParse(filter.Value.ToString(), out var datetime))
         {
            filter.Value = datetime;
            descriptors[i] = filter;
         }
      }
   }
}

[Konstantin Dikov]

Hello Ota,

Thank you for sharing the server-side solution with the community. 


Regards,
Konstantin Dikov
Progress Telerik