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.
6 Answers, 1 is accepted
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
Rank 1
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.
Rank 1
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 :) ...
Rank 1
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);
});
Rank 1
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;
}
Rank 1
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),
Rank 1
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-
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
Rank 1
Hi Casey,
Below page is throwing error
https://docs.telerik.com/kendo-ui/controls/data-management/grid/date-formats
Thanks,
Sudha
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
" 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()" },
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