Kendo grid automatically converting timezone?

15 posts, 0 answers
  1. David A.
    David A. avatar
    126 posts
    Member since:
    Aug 2008

    Posted 14 Oct 2012 Link to this post


    I have an application that is strictly used in the central time zone.  Our web server is on pacific time zone.  Data is passed to the web server from the central time zone and I want to display it this way.  Every non-kendo control shows the time as is.  The kendo grid is showing the date with an adjustment of +2 hours so it appears there is a conversion - which I do not want.

    My column format is as follows:
    c.Bound(g => g.LastUpdated).Format("{0:MM/dd/yyyy hh:mm tt}")

    Is it possible to tell the grid to show the date/time "as is"?

    David A.
  2. Pete
    Pete avatar
    1 posts
    Member since:
    Oct 2012

    Posted 15 Oct 2012 Link to this post

    I'm also trying to do something similar. I am using a remote datasource that uses strings such as "2012-10-15 19:17:07
    " to always represent time in Eastern (both EDT and EST depending on time of year). I am reading this from an XML feed. Is there a way to a) format the data so it is read with date and time, and b) is there a way to leave the time as is?

    schema: {
                    type: "xml",
                    data: "/CMReport/changes/change",
                    model: {
                        fields: {
                            Start:   { type: "date",   field: "startDate/text()" },
                            End:     { type: "date",   field: "endDate/text()" },

  3. Igor
    Igor avatar
    1 posts
    Member since:
    Mar 2013

    Posted 02 Apr 2013 Link to this post

    I'm also looking for something like this. 
    It would be really helpful if kendo would not touch timezone

    Did little search, this can help somebody else:
  4. Petur Subev
    Petur Subev avatar
    1882 posts

    Posted 05 Apr 2013 Link to this post


    Since the dates are created on the client when the response from the server is returned - the dates are always created with an offset according to the timezone of the browser:
    You can try to create date in the browser's console and see the result (you will see the difference if your timezone is different than the UTC 0):
    new Date("2012-01-12T18:45"); 

    Thus said, I suggest you to take a look at this code library:

    Kind regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Chris
    Chris avatar
    1 posts
    Member since:
    Sep 2014

    Posted 14 Jul 2015 in reply to Petur Subev Link to this post

    The js onRequestEnd script provided here:

    doesn't work.  It appears to stop here: if ( 

    Do you have a script that works,  and do you have a script that auto does it to any field that is a date or datetime type? I don't want to call out each date field, and then if I add another date field remember to add the new field.
  6. Leon
    Leon avatar
    2 posts
    Member since:
    Dec 2014

    Posted 16 Jul 2015 in reply to Chris Link to this post

    Assuming all your dates/time are stored in UTC timezone in the database, you can create a new ActionResult class that inherits from the JsonResult class, then set the DateTimeZoneHandling setting to handle create it as Utc time. This is because the default JSON serializer creates all time in Local time (server time).

    This means, you're 07/16/2015 12:00am (UTC) is now something else because of the default setting...  To fix the problem, you can follow the above suggestion or you can do the following that fixes everything.

     Here it is..

    using System;
    using System.Collections.Generic;
    using System.Web.Mvc;
    using Newtonsoft.Json;
    using Newtonsoft.Json.Converters;
    using Newtonsoft.Json.Serialization;

    namespace ReportProcessing.Web
        public class JsonUtcResult : JsonResult
            private static readonly JsonSerializerSettings Settings = new JsonSerializerSettings
                DateTimeZoneHandling = DateTimeZoneHandling.Utc

            public override void ExecuteResult(ControllerContext context)
                if (this.JsonRequestBehavior == JsonRequestBehavior.DenyGet &&
                    string.Equals(context.HttpContext.Request.HttpMethod, "GET", StringComparison.OrdinalIgnoreCase))
                    throw new InvalidOperationException("GET request not allowed");

                var response = context.HttpContext.Response;

                response.ContentType = !string.IsNullOrEmpty(this.ContentType) ? this.ContentType : "application/json";

                if (this.ContentEncoding != null)
                    response.ContentEncoding = this.ContentEncoding;

                if (this.Data == null)

                response.Write(JsonConvert.SerializeObject(this.Data, Settings));

    Then in your controller... Add the following..

            protected JsonResult JsonUtc(object data)
                return new JsonUtcResult
                    Data = data


    To use the new JsonUtc..

    return JsonUtc(reports.ToDataSourceResult(request));

     Now Test and retest... :) Adjust the time zone on your computer or VM and see how the Grid automically adjust your UTC time from the database to the clients timezone automatically and correctly :)  ... 







  7. Leon
    Leon avatar
    2 posts
    Member since:
    Dec 2014

    Posted 16 Jul 2015 in reply to Petur Subev Link to this post

    Instead of looking for the date your way on the clientside... 

     You can add a class to each one of the columns.. Then on the DataBound event look for each one of the dates on the grid and convert them to the client side... 

              .Columns(columns =>
                  columns.Bound(c => c.SentToQueueDate).Width(80).HtmlAttributes(new Dictionary<string, object> { { "class", "utc-date" } });
     columns.Bound(c => c.SomeOtherDateDate).Width(80).HtmlAttributes(new Dictionary<string, object> { { "class", "utc-date" } });
             .HtmlAttributes(new Dictionary<string, object> { { "class", "grid-status" } })
            .Events(ev => ev.Change("onRowClicked").DataBound("onDataBound"))
            .Pageable(pageable => pageable
            .DataSource(dataSource => dataSource
                .Read(read => read.Action("someAction", "SomeController"))

    function onDataBound(arg) {
        //var grid = this;
    $(".utc-date").each(function () {
            var text = UtcToLocal($(this).text(), 'display');
    }        var text = UtcToLocal($(this).text(), 'display');


  8. Jon
    Jon avatar
    27 posts
    Member since:
    Dec 2012

    Posted 28 Aug 2015 in reply to Leon Link to this post

    Leon, could you also post the code for your UtcToLocal method?
  9. Mark
    Mark avatar
    14 posts
    Member since:
    Apr 2015

    Posted 18 Aug 2016 in reply to Leon Link to this post

    Thanks Leon, worked well for me!
  10. Leon
    Leon avatar
    2 posts
    Member since:
    Dec 2015

    Posted 18 Aug 2016 in reply to Jon Link to this post

    sorry for the very delayed response.. but here is what I used for UtcToLocal.


    function isValidDate(date) {
    if (date.toString() != "Invalid Date") {
    return true;
    return false;
    function UtcToLocal(input, type) {
    if (input.length > 0) {
    var kendoDate = kendo.parseDate(input);
    kendoDate = kendo.toString(kendoDate, "g");
    if (kendoDate != null) {
    var date = new Date(kendoDate + " UTC");
    if (isValidDate(date)) {
    switch (type) {
    case 'ISO':
    return kendo.toString(date, "u");
    case 'dateonly':
    return kendo.toString(date, "d");
    case 'display':
    return kendo.toString(date, "g");
    return input;
    } else {
    return input;
    return input;

  11. James
    James avatar
    2 posts
    Member since:
    Aug 2017

    Posted 28 Dec 2017 Link to this post

    I found that even with the posted tick corrections for time zones, the date filtering within the Kendo Grid could still be a problem.  We only were interested in the date values and not the times for our application.  Finally, I was able to use the following to prevent the time zone adjustments and allow consistent grid date filtering between folks in different time zones. 

    For both the Grid Read and Edit, I added: DESIGN_DATE = Convert.ToDateTime(p.DESIGN_DATE).Date or DESIGN_DATE = SqlFunctions.DatePart("m", p.DESIGN_DATE) + "/" + SqlFunctions.DatePart("day", p.DESIGN_DATE).Date +"/" + SqlFunctions.DatePart("year", p.DESIGN_DATE),

  12. Casey
    Casey avatar
    4 posts
    Member since:
    Mar 2017

    Posted 06 Feb 2018 in reply to Petur Subev Link to this post

    Yes, the client side does do this, by why is Kendo not just reading the data and displaying it untouched? I could understand if calculations or logic done against it. Do i really need to convert everything to strings, converter functions etc or has there since been a fix for this issue?



  13. Stefan
    Stefan avatar
    3001 posts

    Posted 09 Feb 2018 Link to this post

    Hello, Casey,

    I can recommend checking our new article regarding the Grid dates in the different scenarios. We mostly recommend using UTC both on the client and on the server:

    I hope this is helpful.

    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  14. Ken
    Ken avatar
    3 posts
    Member since:
    Jan 2017

    Posted 26 Jun 2019 in reply to Stefan Link to this post

    Hi Casey,

    Below page is throwing error




  15. Tsvetomir
    Tsvetomir avatar
    754 posts

    Posted 28 Jun 2019 Link to this post

    Hi Ken,

    The article is now part of a broader article. Along with all aspects of the internationalization, it could be found here:

    I have updated the article path and the previous link should be redirecting correctly, shortly.

    Kind regards,
    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.
Back to Top