Problem with loading filter setting on Date columns

3 posts, 1 answers
  1. Brent
    Brent avatar
    7 posts
    Member since:
    Apr 2015

    Posted 21 Jun Link to this post

    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>
    }

  2. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 23 Jun Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Brent
    Brent avatar
    7 posts
    Member since:
    Apr 2015

    Posted 04 Jul Link to this post

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

Back to Top