Kendo grid automatically converting timezone?

6 Answers 2335 Views
Grid
David A.
Top achievements
Rank 1
David A. asked on 14 Oct 2012, 06:15 AM
Hi,

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"?

Thanks,
David A.
Pete
Top achievements
Rank 1
commented on 15 Oct 2012, 10:56 PM

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()" },


Igor
Top achievements
Rank 1
commented on 02 Apr 2013, 12:59 PM

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

EDIT:
Did little search, this can help somebody else: http://www.kendoui.com/forums/ui/date-time-pickers/format-date-in-grid.aspx

6 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 05 Apr 2013, 10:02 AM
Hello,

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:

http://www.kendoui.com/code-library/mvc/grid/using-utc-time-on-both-client-and-server-sides.aspx


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!
Chris
Top achievements
Rank 1
commented on 14 Jul 2015, 06:55 AM

The js onRequestEnd script provided here: http://www.telerik.com/support/code-library/using-utc-time-on-both-client-and-server-sides

doesn't work.  It appears to stop here: if (this.group().length) 

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.
0
Leon
Top achievements
Rank 1
answered on 16 Jul 2015, 11:24 PM

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)
            {
                return;
            }

            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 :)  ... 

 

 ​

 

 

 

 

0
Leon
Top achievements
Rank 1
answered on 16 Jul 2015, 11:35 PM

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... 

        @(Html.Kendo().Grid<ReportProcessing.DAL.vwMyDashboard>()
          .Name("grid")
          .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
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(40)
            .Read(read => read.Action("someAction", "SomeController"))
        )



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

 

Jon
Top achievements
Rank 1
commented on 28 Aug 2015, 09:30 PM

Leon, could you also post the code for your UtcToLocal method?
Mark
Top achievements
Rank 1
Veteran
commented on 18 Aug 2016, 07:02 PM

Thanks Leon, worked well for me!
0
Leon
Top achievements
Rank 1
answered on 18 Aug 2016, 07:10 PM

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");
default:
}
}
return input;
}
} else {
return input;
}
return input;
}

0
James
Top achievements
Rank 1
answered on 28 Dec 2017, 01:43 PM

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),

Casey
Top achievements
Rank 1
commented on 06 Feb 2018, 06:27 PM

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?

 

-Thanks-

0
Stefan
Telerik team
answered on 09 Feb 2018, 09:24 AM
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:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/date-formats

I hope this is helpful.

Regards,
Stefan
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.
Ken
Top achievements
Rank 1
commented on 26 Jun 2019, 05:25 AM

Hi Casey,

Below page is throwing error

https://docs.telerik.com/kendo-ui/controls/data-management/grid/date-formats

Thanks,

Sudha

 

Tsvetomir
Telerik team
commented on 28 Jun 2019, 02:16 PM

Hi Ken,

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

https://docs.telerik.com/kendo-ui/controls/data-management/grid/globalization/intl

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


Kind regards,
Tsvetomir
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
David A.
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Leon
Top achievements
Rank 1
Leon
Top achievements
Rank 1
James
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or