Date field filter is not persisted

[Marina]

Hello,

I'm trying to do following thing: when user leaves the page with grid his current filters ang sortings are saved and applied the next time he visits the page (not the whole persisted state).

So I'm doing it like this:

    var savedFilters = localStorage["kendo-grid-filters"];
    if (savedFilters) {
      $("#grid").data("kendoGrid").dataSource.filter(JSON.parse(savedFilters));
    }
    var savedSort = localStorage["kendo-grid-sort"];
    if (savedSort) {
      $("#grid").data("kendoGrid").dataSource.sort(JSON.parse(savedSort));
    }
    window.onbeforeunload = function () {
      localStorage["kendo-grid-filters"] = kendo.stringify($("#grid").data("kendoGrid").dataSource.filter());
      localStorage["kendo-grid-sort"] = kendo.stringify($("#grid").data("kendoGrid").dataSource.sort());
      return;
    }

Everything is working fine except filter for Date columns. For example, i set filter "equal to 08.08.2018", it filters the column. Then I leave the page and filter stored in local cache is "{field: "BPStartDate", operator: "eq", value: "2018-08-07T21:00:00.000Z"}". Then I visit the page again and I see that filter is kinda applied (filter icon is highlighted and has correct value) but I can't see filtered data.

What is the problem?

I attached two screenshots to illustrate what I'm talking about.

Thanks.

[Tsvetomir]

Hi Marina,

When the options are parsed using the JSON.parse() method, the Date type values have to be parsed as an actual date. By default, this is not handled by the JSON.parse().

In order to parse all the filter values, recursively iterate over all of the filter expressions. The recursion is needed because there might be numerous filters applied and their count is not known:

function parseFilterDateValues(expression, fieldTypeChecker, grid){
  if(expression.filters){
    parseFilterDateValues(expression.filters, fieldTypeChecker, grid);
  } else {
    expression.forEach(function(filter){
      if(fieldTypeChecker(grid, filter.field)){
        filter.value = kendo.parseDate(filter.value);
      }
    })
  }
}

And the function responsible for returning the type of the field:

function checkIfDate(grid, field){
  return grid.dataSource.options.schema.model.fields[field].type === 'date';
}

All that has to be done now is to load the filters on the grid using the following function:

function LoadGridFilters(filterString) {
  if (filterString != "") {
    var filters = JSON.parse(filterString);
    var grid = $("#grid").data("kendoGrid");

    parseFilterDateValues(filters,checkIfDate, grid);

    var datasource= $("#grid").getKendoGrid().dataSource;
    datasource.filter(filters);
  }
}

And load the saved options in the click event handler of a button:

$("#load").click(function (e) {
  e.preventDefault();
  var options = localStorage["kendo-grid-options"];
  if (options) {
    LoadGridFilters(options);
  }
});

The corresponding Dojo sample which demonstrates how the abovementioned approach can be applied can be found here:

https://dojo.telerik.com/izAyaMej

Let me know if there is a need for further clarifications on the approach.


Kind regards,
Tsvetomir
Progress Telerik

[Todd]

I just got SO OWNED By this bug.Made me look like a joker who can't code!  Why isn't this fixed in the grid if it is a known issue?

[Todd]

https://demos.telerik.com/kendo-ui/grid/persist-state  

You demo conveniently has no Date field. No mention of the issues with Date Fields on the demo screen either.

[Tsvetomir]

Hi Todd,

I am sorry to hear that you have had a bad experience with the object serialization in JavaScript.

Generally, the data is serialized before it is saved in the Local storage of the browser or a place according to your preferences. The issue comes from the fact that the dates are not saved as JavaScript Date objects. The Kendo UI team does not have any control over the serialization provided by the language. The solution would be to use a custom serializer but this would be inconvenient for the vast majority of the users. 

If you consider this as a bug, you can log it in our Public feedback portal where this case would be thoroughly reviewed by our development team:

https://feedback.telerik.com/kendo-jquery-ui

As per the live demo that you have shared, I have investigated the example and the grid is actually bound to the customers table from the Northwind database. Even though the table does not have a date field, the main purpose of the example is to demonstrate how the grid's options could be saved and later on applied to the grid. 

The Date object in JavaScript is a rather delicate topic and there might be cases in which the dates have to be modified before passing them to the grid. If the grid were to adjust the dates, it would comply with the anti-pattern for coupling functionalities. The grid should purely display data and execute operations with the data on hand.

I hope that you find these clarifications helpful. In case additional information is needed, me and the team will be happy to assist you.


Kind regards,
Tsvetomir
Progress Telerik

[Todd]

[quote] 
I hope that you find these clarifications helpful. In case additional information is needed, me and the team will be happy to assist you.
[/quote]

You should at least put a warning on the demo page that filtering will not persist on columns with a date datatype.

 

 

[Tsvetomir]

Hi Todd,

Thank you for taking the time for sharing your feedback with us. 

I have logged an item in our private backlog and this suggestion will be reviewed by our respective team. If you have any other suggestions, it would be appreciated if could address them.


Kind regards,
Tsvetomir
Progress Telerik