Solution for Grid Filtering of Dates

[Steven]

I am looking for a solution to an issue with date filtering in the Kendo grid control.  
Below are example MVC code segments for this issue.  We are currently on Kendo 2018.2.620.440 version.

Issue:
The issue is that the grid date being displayed and used for filtering is incorrect in that it is minus one day.  The web server is running 
in UTC time and I the client are running in US Central Time.  I understand how to use the client template for the column to display the date 
correctly using a string property of the date, but in order to filter we need to be filtering on the date property so that the filter menu
displays for dates (IsEqualTo, IsGreaterThanOrEqualTo, IsLessThanOrEqualTo).  If I change the column to use a string date property
the filter menu display entries for text filtering, not date filtering.

Running the code locally has no issue since the web server and client are running in the same zone. It's when the web server is 
running in a different zone. I understand that the Kendo grid is converting the date from the server (running in UTC) to the client zone.  
Is there a way to stop this or what can I set on the server date object so it would not convert the date.


Code:
------------------------------------------------------------------------------------------------
Model: UserAccountModel.cs

    public class UserAccountModel
    {
        public UserAccountModel();

        public string ID { get; set; }
        public DateTime? BirthDate { get; set; }
        public string DisplayName { get; set; }
    }
}


------------------------------------------------------------------------------------------------
View: MemberAccounts.cshtml

<div class="row">
    @(Html.Kendo().Grid<UserAccountModel>(appEmpList)
        .Name("MemberApplicationDatesGrid")
        .HtmlAttributes(new { @class = "editor-grid" })
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(3)
        )
        .Columns(columns =>
        {
            columns.Bound(e => e.BirthDate).Format("{0:d}").Sortable(true).Filterable(true).Title("Date");
            columns.Bound(e => e.DisplayName).Filterable(true).Sortable(true).Title("Name");
        })
        .Scrollable()
        .Resizable(r => r.Columns(true))
        .Sortable(sortable => sortable
            .AllowUnsort(false)
            .SortMode(GridSortMode.SingleColumn))
        .Filterable(filterable => filterable
            .Extra(false)
            .Messages(msg => msg.Clear("Clear"))
            .Mode(GridFilterMode.Menu).Operators(operators => operators
                .ForDate(date => date.Clear()
                    .IsEqualTo("Equal To")
                    .IsGreaterThanOrEqualTo("Greater Than Or Equal To")
                    .IsLessThanOrEqualTo("Less Than Or Equal To")
                )
            )
        )
        .DataSource(d => d.Ajax()
            .Events(e => e.Error("onWebApiError"))
            .Model(m => m.Id(e => e.ID))
            .ServerOperation(false)
            .PageSize(10)
        )
    )
</div>


------------------------------------------------------------------------------------------------
Controller Method: MemberBase.cs

[HttpGet]
public ActionResult MemberAccounts()
{
//set mock data
List<UserAccountModel> appMbrList = new List<UserAccountModel>();
for (int idx = 0; idx < 20; idx++)
{
appMbrList.Add(new UserAccountModel()
{
BirthDate = DateTime.Now.AddYears(-idx).Date,
ID = idx.ToString(),
DisplayName = "Name-" + idx.ToString()
});
}
ActionResult actionResult = this.View(appMbrList);

return actionResult;
}

[Viktor Tachev]

Hello Steven,

When a date is returned from the server the browser will apply an offset to it corresponding to the client time zone. In order to avoid this browser behavior the recommended approach is to intercept the response from the server and remove the offset. The how-to article below illustrates the approach:

• https://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/editing/utc-time-on-both-server-and-client

Give the approach a try and let me know how it works for you.


Regards,
Viktor Tachev
Progress Telerik

[Steven]

I can see that the solution provided in your reply would work, but that is only if the retrieval of data uses a Read from the ajax datasourse.  In our case the presentation controller already has all of the the data and is passing it to the view to load in the grid.  How can I intercept this to not convert the date to local or to convert the date back to a UTC date?

[Viktor Tachev]

Hello Steven,

In that case you can perform the date conversions server-side. Please examine the resources below that elaborate in more detail on converting DateTime on the server.

• https://weblog.west-wind.com/posts/2015/feb/10/back-to-basics-utc-and-timezones-in-net-web-apps
• http://www.hackered.co.uk/articles/globalization-model-binding-datetimes-with-asp-net-mvc
  

Regards,
Viktor Tachev
Progress Telerik