New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

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

Updated over 6 months ago

Environment

Product	Telerik UI for ASP.NET MVC Grid
Product version	2025.1.227

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 to render the local time. Otherwise, the current browser timezone offset will apply.

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

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

Use the RequestEnd 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.

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

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also