Kendo Grid Automatic Time Zone Change

Question

On my Kendo grid, I get the date from the server. On the client side, this time changes to the client’s time zone and is displayed. How can I show the same time from the server to the client.

the following is my kendo code to bind date and time.

columns.Bound(p => p.CreateDate).Format("{0:dd/MM/yyyy hh:mm:ss}").Sortable(true).Width(180); 

Answer 1

That was my decision.

on the controller I liked it

DateTime time = DateTime.Now ();

string x = time. ToString ("MM / dd / yyyy hh: mm: ss tt");

In view

columns.Bound (p => px);

It is also sorted.

Answer 2

Since dates are created on the client when a response is returned from the server, dates are always created with an offset according to the time zone of the browser

This will help you:

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

Answer 3

For example, your client computer is located in Sydney, and your code is deployed in India

Saving date and time in the database: When transferring date and time from the client side (javascript) to the server (.net), pass it as a string so that it does not convert to server time (Great Britain) when saving to the database

If your date and time field is not editable, follow solution 1, otherwise solution 2 would be the right choice

Extract from the database :

Solution 1:

Client Side Code :

 cols.Bound(c => c.ExamDate).ClientTemplate(("#= ExamDateString #")).Hidden(false).Filterable(x => x.Cell(cell => cell.ShowOperators(false).Operator(StringOperator.eq.ToString()))); 

Server Side Code:

Server model property for format

 public string ExamDateString { get { return ExamDate.HasValue ? ExamDate.Value.ToString("dd/MM/yyyy hh:mm:ss") : string.Empty; } } 

Solution 2:

Extract from the database:

Client Side Code:

 $.ajax({ type: "POST", url: '@Url.Action("Controller action method name", "Controller name")', data: { "clientMachineTimeZoneOffsetInMinutes ": (new Date()).getTimezoneOffset() }, success: function (data) { } }); 

Server Code:

// Server time zone (India) Offset minutes: 330

// Client Time Zone (Sydney) Offset minutes: -600

// The difference between the time zone of the client and server minutes = -270

 var serverTimeZoneOffsetInMinutes = DateTimeOffset.Now.Offset.TotalMinutes; var serverAndClientMachineTimeZoneDifferenceInMinutes = clientMachineTimeZoneOffsetInMinutes + serverTimeZoneOffsetInMinutes; //Update your date time field with this offset minutes ExamDate = ExamDate.Value.AddMinutes(serverAndClientMachineTimeZoneDifferenceInMinutes); 

Answer 4

Another option is to use a custom JsonResult and convert the date to ISO format.

 public class IsoDateJsonResult : JsonResult { public override void ExecuteResult(ControllerContext context) { if (context == null) { throw new ArgumentNullException("context"); } HttpResponseBase response = context.HttpContext.Response; if (!String.IsNullOrEmpty(ContentType)) { response.ContentType = ContentType; } else { response.ContentType = "application/json"; } if (ContentEncoding != null) { response.ContentEncoding = ContentEncoding; } if (Data != null) { var isoConvert = new IsoDateTimeConverter(); response.Write(JsonConvert.SerializeObject(Data, isoConvert)); } } 

Then change the Controller method to return IsoDateJsonResult instead of ActionResult/JsonResult .

Answer 5

In my case, the server is in CST, and I'm in MST. I needed to save SQL Server data in a browser and it turned out 02/08/18 23:57 as 02/08/18 22:57 on my Kendo Grid. So I did this, hope this helps:

Checks user / browser timezone offset

Gets the difference in hours from a server timeline offset

Let's look at a column in the Kendo grid with the .dbDate class

Captures the date in this cell (displayed time) from the data object

Uses Moment.js to convert (convertTime) depending on the difference in the hours that we transmit.

Formats convertTime to the desired format, i.e. 02/08/18 23:57

Add 1 to i so that the next date in the object is adjusted.

Returns the grid updated date and time.

Should be launched last when loading / updating page / grid.

 function getDateOffset() { var date = new Date(); var offset; var diff; offset = date.getTimezoneOffset() if (offset > 360) { //360 = CST diff = +(offset - 360) / 60 } else if (offset < 360) { diff = -(360 - offset) / 60 } else { diff = 0 } $(".dbDate").each(function (i) { var grid = $('#Grid').data('kendoGrid'); var displayedTime = grid.dataSource.data()[i].TicketDateTime var convertedTime = new moment(displayedTime).add(diff, 'hours').toDate(); var originalTime = moment(convertedTime).format("MM/DD/YY HH:mm"); i + 1 $(this).html(originalTime) }) } 

Answer 6

Solution 2 in my answer above, daylight saving time is added, if you are not in daylight saving time, but trying to access the daylight saving time, rewrite solution 2 to also support daylight saving time

Client-side code for updating the time zone name:

  $.ajax({ type: "POST", url: '@Url.Action("Controller action method name", "Controller name")', data: { "timeZoneName": Intl.DateTimeFormat().resolvedOptions().timeZone }, success: function (data) { } }); 

The name of the controller method for updating the time zone in a session:

  public ActionResult actionMethod(string timeZoneName) { Session["timeZoneName"] = Convert.ToString(timeZoneName); return Json(new { success = true }); } 

Application Settings:

 <add key ="Europe/London" value ="GMT Standard Time" /> 

The key here is the client’s time zone name, returned by the browser and stored in the session. Here we must add entries for all time zones.

Put the code below in the controller action method to get the exam date:

 var clientMachineTimeZoneName = Convert.ToString(Session["timeZoneName"]); Get the sever timezone id from config for the corresponding time zone which we got from client side var timeZoneId = ConfigurationManager.AppSettings[clientMachineTimeZoneName]; TimeZoneInfo clientTimezoneDetails = TimeZoneInfo.FindSystemTimeZoneById(timeZoneId); var clientTimeZoneOffsetMinutes = clientTimezoneDetails.GetUtcOffset(x.ExamDate.Value).TotalMinutes * -1; var serverAndClientMachineTimeZoneDifferenceInMinutes = clientTimeZoneOffsetMinutes + TimeZoneInfo.Local.GetUtcOffset(x.ExamDate.Value).TotalMinutes; //Update your date time field with this offset minutes ExamDate = ExamDate.Value.AddMinutes(serverAndClientMachineTimeZoneDifferenceInMinutes);