Grid Date Filter Value Missing Time Zone

4 posts, 0 answers
  1. Aleks
    Aleks avatar
    33 posts
    Member since:
    Nov 2018

    Posted 04 Feb Link to this post

    When using a date filter on a column bound to a DateTime value the value submitted is truncated and doesn't contain the time zone information.

    c.Bound(x => x.Created)
    .Filterable(f => f
    .Operators(o => o.ForDate(d => d.Clear().IsGreaterThanOrEqualTo("On or after").IsLessThan("Before")))
    .Extra(true)
    .UI(GridFilterUIRole.DateTimePicker)
    );

     

    If the user selects 2/5/2021 12:00 PM and (for example) the users time zone is Australia/Sydney, the following is send with the request:

    filter: Created~gte~datetime'2021-02-05T12-00-00'

     

    As the time zone information is omitted model binding assumes this is a local time in the time zone the server is operating in.

     

    See also https://github.com/telerik/kendo-ui-core/issues/5737 (which was erroneously closed) and https://github.com/telerik/kendo-ui-core/issues/5306 (which has been open for over a year).

    Using:

    <PackageReference Include="Telerik.UI.for.AspNet.Core" Version="2021.1.119" />
    "@progress/kendo-theme-bootstrap": "^4.30.0",
    "@progress/kendo-theme-default": "^4.32.0",
    "@progress/kendo-ui": "^2021.1.119",

  2. Patrick
    Admin
    Patrick avatar
    257 posts

    Posted 09 Feb Link to this post

    Hi Aleks,

    One way to be able to handle this issue is to consider using UTC on the server and the client.  We have a dedicated Kendo UI Knowledge Base article on the matter which will keep the data specific to UTC.

    Pertaining to the feature request, I recommend following the adding your vote to this specific public feature request and following it for any future updates.  

    Please let me know if you have any questions regarding the matter.

    Regards,
    Patrick
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. Aleks
    Aleks avatar
    33 posts
    Member since:
    Nov 2018

    Posted 09 Feb in reply to Patrick Link to this post

    How does this help with a filter? there is no inbound value to convert? and this only helps for displaying dates... how does it help date input?

    If you re-read the question, the problem is that it already *is* treating the filter date/time values as UTC... it's displaying a local date time, but submitting a UTC one, without converting!

    Re the "feature request", I think the point I was making is that it shouldn't be a "feature request" because it's obviously a bug.

    Seriously... the "solution" is to add 40 something lines of JavaScript everywhere you use a date, instead of just fixing the grid to use proper date formats per the ASP.NET Core binding model, when it's an ASP.NET Core control?

  4. Patrick
    Admin
    Patrick avatar
    257 posts

    Posted 12 Feb Link to this post

    Hello Aleks,

    The Kendo UI DatePicker utilizes the JavaScript Date object to hold the selected date value which, in turn, uses the local timezone based on the browser.  That being said, there are a couple of ways in which you can handle date inputs being filtered with a Kendo UI DateTimePicker for a Kendo UI Grid:

    1.  Utilize the kendo.timezones.js to convert the values chosen from the Kendo UI DateTimePicker to UTC using the toLocalDate method during the Kendo UI Grid's Filter Event:

    <!--Include the kendo.timezones script-->
    <script src="https://kendo.cdn.telerik.com/ADD KENDO VERSION HERE/js/kendo.timezones.min.js"></script>

    Grid

    @(Html.Kendo().Grid<CarViewModel>()
        .Name("grid")
        .Events(e => e.Filter("onFilter"))
        //...
    )

    JavaScript

            function onFilter(e) {
    
                //Loop through each filter
                for (x = 0; x < e.filter.filters.length; x++) {
    
                    //if the filter is an instance of Date
                    if (e.filter.filters[x].value instanceof Date) {
    
                        //Get the current date value with local browser timezone
                        var oldValue = e.filter.filters[x].value;
    
                        //Convert to UTC
                        var utcDate = new Date(kendo.timezone.toLocalDate(oldValue));
    
                        //Alternative approach: Apply any timezone 
                        //var utcDate = new Date(kendo.timezone.apply(oldValue, "Etc/UTC"));
    
                        //Set the filter to the converted UTC date
                        e.filter.filters[x].value = utcDate;
                    }
                }
            }

     

    2.  Send the specific timezone offset during the Action Method call using the Data method to handle on the Server:

    @(Html.Kendo().Grid<CarViewModel>()
        .Name("grid")
         //...
        .DataSource(ds =>
            ds.Ajax()
            .Read(r=> r.Action("AllCars", "DateTimeOffset").Data("sendTimeZone"))
         )
    )

    JavaScript

            function sendTimeZone(e) {
    
                //Get Current TimeZone OffSet
                var myDate = kendo.toString(new Date(), "zzz");
    
                return {
                    timeZoneOffset: myDate
                }
            }

    Controller

            public IActionResult AllCars([DataSourceRequest] DataSourceRequest request, string timeZoneOffset)
            {
                var result = GetData();
               
                //Handle Server Side Filtering based on timeZoneOffSet
    
                return Json(result.ToDataSourceResult(request));
            }

     

    I hope this information helps regarding your web application.  For now, please continue to follow this feature request for future updates and add any comments pertaining to a built-in way to handle the UTC conversion in the Kendo UI Grid's DateTimePicker filter.  

    Regards,
    Patrick
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top