# Use UTC Format on Both Client and Server when using Dates in Grid

## Environment

<table>
 <tr>
  <td>Product</td>
  <td>Telerik UI for ASP.NET MVC Grid</td>
 </tr>
 <tr>
  <td>Product version</td>
  <td>2025.4.1217</td>
 </tr>
</table>

## Description

How can I keep all `DateTime` properties in `UTC` format in the Grid on the client and the server?

## Solution

The following example demonstrates how to keep a `DateTime` property in a `UTC` format on both server and client when using a Grid with Ajax binding and editing.

Every time a date is retrieved from the database or received from the client, the `DateTime Kind` property is left unspecified on the server side. The .NET framework implicitly converts such dates to local formats.

A similar thing happens on the client side. Browsers convert all dates according to the local time when the `Date` is parsed from a `Number` to a `Date` object. For example, when you create a JavaScript date, such as `new Date(1353397262112)`, browsers on different machines, which use different TimeZone system settings show different string representations.

To keep time in the `UTC` format, apply an explicit transformation to the dates on both client and server.

> If you use formats for parsing `UTC` date strings, [apply the `zzz` specifier](https://docs.telerik.com/kendo-ui/framework/globalization/dateparsing#parse-utc-date-strings) to render the local time. Otherwise, the current browser timezone offset will apply.

Below are listed the two corresponding steps for you to follow.

1. Use a `ViewModel` with a setter and a getter that explicitly set the `DateTime Kind` to `UTC`.

   ```C#
       private DateTime birthDate;
       public DateTime BirthDate
       {
           get { return this.birthDate; }
           set {
               this.birthDate = new DateTime(value.Ticks, DateTimeKind.Utc);
           }
       }
   ```

2. Use the [`RequestEnd`](https://www.telerik.com/aspnet-mvc/documentation/api/kendo.mvc.ui.fluent/datasourceeventbuilder#requestendsystemstring) event of the DataSource to intercept and replace the incoming `DateTime` field with the time difference.

   ```Razor
       @(Html.Kendo().Grid<KendoUIMVC5.Models.Person>()
           .Name("persons")
           .DataSource(dataSource => dataSource
               .Ajax()
               .Events(ev=>ev.RequestEnd("onRequestEnd"))
           )
           ... // Additional configuration.
       )

       <script type="text/javascript">
           (function () {
               window.onRequestEnd = function (e) {
                   if (e.response.Data && e.response.Data.length) {
                       var data = e.response.Data;
                       if (this.group().length && e.type == "read") {
                           handleGroups(data);
                       } else {
                           loopRecords(data);
                       }
                   }
               }

               function handleGroups(groups) {
                   for (var i = 0; i < groups.length; i++) {
                       var gr = groups[i];
                       offsetDateFields(gr); //handle the Key variable as well
                       if (gr.HasSubgroups) {
                           handleGroups(gr.Items)
                       } else {
                           loopRecords(gr.Items);
                       }
                   }
               }

               function loopRecords(persons) {
                   for (var i = 0; i < persons.length; i++) {
                       var person = persons[i];
                       offsetDateFields(person);
                   }
               }

               function offsetDateFields(obj) {
                   for (var name in obj) {
                       var prop = obj[name];
                       if (typeof (prop) === "string" && prop.indexOf("/Date(") == 0) {
                           obj[name] = prop.replace(/-?\d+/, function (n) {
                               var offsetMiliseconds = new Date(parseInt(n)).getTimezoneOffset() * 60000;
                               return parseInt(n) + offsetMiliseconds
                           });
                       }
                   }
               }
           })();
       </script>
   ```

To review the complete example, refer to the [project on how to use UTC time on both the client and the server when the Grid contains dates](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/GridDateUtcOnServerAndClient).

## More ASP.NET MVC Grid Resources

* [ASP.NET MVC Grid Documentation](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/overview)
* [ASP.NET MVC Grid Demos](https://demos.telerik.com/aspnet-mvc/grid/index)
* [ASP.NET MVC Grid Product Page](https://www.telerik.com/aspnet-mvc/grid)
* [Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)](https://www.telerik.com/aspnet-mvc/documentation/getting-started/video-onboarding)
* [Telerik UI for ASP.NET MVC Forums](https://www.telerik.com/forums/aspnet-mvc)

## See Also

* [Client-Side API Reference of the Grid for ASP.NET MVC](https://docs.telerik.com/kendo-ui/api/ui/grid)
* [Server-Side API Reference of the Grid for ASP.NET MVC](https://docs.telerik.com/aspnet-mvc/api/grid)
* [Telerik UI for ASP.NET MVC Knowledge Base](https://docs.telerik.com/aspnet-mvc/knowledge-base)