This is a migrated thread and some comments may be shown as answers.

Solution for Grid Filtering of Dates

3 Answers 422 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 16 Apr 2019, 03:58 PM
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;
}

3 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 18 Apr 2019, 07:36 AM
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:


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


Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Steven
Top achievements
Rank 1
answered on 22 Apr 2019, 02:11 PM
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?
0
Viktor Tachev
Telerik team
answered on 23 Apr 2019, 11:13 AM
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.



Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Steven
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Steven
Top achievements
Rank 1
Share this question
or