Problem with loading filter setting on Date columns

[Brent]

So I have an MVC grid where I'm saving the grid settings to localstorage so that I can load the filters and the current page back to the same spot when navigating back from another action. It all works great for almost all of the columns, except for the date column (LastUpdatedDate below). The date entered is there, but you must click the Filter button again on this column to apply it, where on other columns, the filter is applied already on load. Any ideas? Page code below.

@{
    ViewBag.Title = "Vendors";
}
<h2>Vendors Index</h2>

@(Html.Kendo().Grid<VendorRegistry.Models.Vendor>()
      .Name("grid")
      .Columns(columns =>
      {
          //Excel like filtering on columns. Pulls from datasource because default shows them not in order. See Expired for default without datasource.
          columns.Bound(c => c.CompanyName).Filterable(ftb => ftb.Multi(true).Search(true).DataSource(ds => ds.Read(r => r.Action("GetCompanies", "VendorGrid"))));
          columns.Bound(c => c.Address1).Filterable(ftb => ftb.Multi(true).Search(true).DataSource(ds => ds.Read(r => r.Action("GetAddresses", "VendorGrid"))));
          columns.Bound(c => c.City).Width(110).Filterable(ftb => ftb.Multi(true).Search(true).DataSource(ds => ds.Read(r => r.Action("GetCities", "VendorGrid"))));
          columns.Bound(c => c.LastUpdatedDate);
          columns.Bound(c => c.Expired).Filterable(ftb => ftb.Multi(true));
          columns.Bound(c => c.Vetted).Filterable(ftb => ftb.Multi(true));
          columns.Template(@<text></text>)
            .ClientTemplate("<a class='k-button k-button-icontext' href='Vendors/Edit/#= ID#'><span class='k-icon k-edit'></span>Edit</a>" +
                            "<a class='k-button k-button-icontext k-grid-delete' href='Vendors/Delete/#= ID#'><span class='k-icon k-delete'></span>Delete</a>" +
                            "<a class='k-button k-button-icontext' href='Vendors/Details/#= ID#'>Details</a>")
            .Title("")
            .Width(240);
      })
      .ToolBar(tools => tools.Excel())
      .Excel(excel => excel
          .AllPages(true)
      )
      .Pageable(pager => pager
          .PageSizes(new[] { 10, 20, 30, 50, 100 }) // Default page sizes are 5, 10 and 20
      )
      .Sortable(sortable => {
          sortable.SortMode(GridSortMode.SingleColumn);
      })
      .Filterable()
      .Events(e => e.DataBound("grid_dataBound"))
      .DataSource(dataSource => dataSource
          .Ajax()
          .ServerOperation(false)
          .Model(model => model.Id(p => p.ID))
          .Read(read => read.Action("Vendors_Read", "VendorGrid"))
          .Destroy(destroy => destroy.Action("Vendors_Destroy", "VendorGrid"))
          .Sort(sort => { sort.Add(vendor => vendor.CompanyName); })
      )
      
)

@section Scripts {
    <script>
        $(document).ready(function () {
            //Load grid settings from localstorage
            var grid = $("#grid").data("kendoGrid");
            var options = localStorage["kendo-grid-options"];
            if (options) {
                grid.setOptions(JSON.parse(options));
            }
        });

        //Save grid settings so they can be reloaded later.
        function grid_dataBound() {
            var grid = $("#grid").data("kendoGrid");
            localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());
        }
    </script>
}

[Boyan Dimitrov]

Hello Brent,

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.

My suggestion is to add the a JavaScript Date object back to the deserialized configuration object before passing it to the setOptions method (override the string representation of the Date object with an actual Date object).

Regards,
Boyan Dimitrov
Telerik

[Brent]

Hi, Thank you, that worked. Here is the full solution for reference.

$(document).ready(function () {
    //Load grid settings from localstorage
    var grid = $("#grid").data("kendoGrid");
    var options = localStorage["kendo-grid-options"];
    if (options) {
        var optionsObj = JSON.parse(options);
        var filters = optionsObj.dataSource.filter.filters;
        for (var i = 0; i < filters.length; i++) {
            if (filters[i].field == "LastUpdatedDate") {
                var dateString = filters[i].value;
                var lastUpdated = new Date(dateString);
                filters[i].value = lastUpdated;
            }
        }
        optionsObj.dataSource.filter.filters = filters;
        grid.setOptions(optionsObj);
    }
});

//Save grid settings so they can be reloaded later.
function grid_dataBound() {
    var grid = $("#grid").data("kendoGrid");
    localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());
}