Kendo grid automatically converting timezone?

8 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 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 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 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
    16 posts
    Member since:
    Dec 2012

    Posted 28 Aug in reply to Leon Link to this post

    Leon, could you also post the code for your UtcToLocal method?
Back to Top