This is a migrated thread and some comments may be shown as answers.
Persist Grid's state func has troubles with DateTime
3 Answers 40 Views
This is a migrated thread and some comments may be shown as answers.
Ota
Top achievements
Rank 1
Ota asked on 06 Apr 2018, 01:11 PM

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?

3 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 11 Apr 2018, 10:41 AM
Hi Ota,

You could try the workaround suggested in the following forum thread:
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Ota
Top achievements
Rank 1
answered on 12 Apr 2018, 08:30 AM

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;
         }
      }
   }
}
0
Konstantin Dikov
Telerik team
answered on 17 Apr 2018, 05:07 AM
Hello Ota,

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


Regards,
Konstantin Dikov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Ota
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Ota
Top achievements
Rank 1
Share this question
or