Formatting Grid DateTime Data Fields to Use UTC

Environment

Product	Telerik UI for ASP.NET Core Grid
Progress Telerik UI for ASP.NET Core version	Created with the 2022.2.913 version

Description

The Grid converts the values in columns that are bound to DateTime fields to local formats. How can I prevent this and keep the UTC format of the time?

Solution

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.

Something similar happens on the client side. When the Date is parsed from a Number to a Date object, the browsers convert all dates according to the local time. 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 the time in 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 to render the local time. Otherwise, the current browser timezone offset will apply.

To apply the explicit transformation:

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

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

2. Use the requestEnd event of the DataSource to intercept and replace the incoming Date field with the time difference.

       @(Html.Kendo().Grid<KendoUIMVC5.Models.Person>().Name("persons")
           .DataSource(dataSource => dataSource
               .Ajax()
               .Events(ev=>ev.RequestEnd("onRequestEnd"))
           )
           // ...
       )
   
       <script>
           var 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 explore the complete example, see the project on how to use UTC time on both the client and the server.

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core Grid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base