How to force (hack?) kendo-ui grid to display the correct date

We have some grids displaying the data from SQL queries, including dates. But for whatever reason, the time zone is being applied to the date twice. For example, the date is today, at 12PM, and we are using GMT-2, here in South Africa. The data comes back correctly from the server, but displays on the client side in the kendo grid as 2PM instead. So all dates are displayed 2 hours off.

(Come to think of it, the time zone is not being applied at all, yet the date appears to be in the correct format. All my code below does, is to force the time zone to be applied correctly. This should be unnecessary.)

Edit: Aargh! These dates can be very confusing… I always forget whether we are GMT plus 2 or minus 2… It turns out, we are GMT+2. So kendo is indeed applying the time zone a second time. I was correct in the first place. My hack below works, but I still don’t believe it should be necessary.

Here’s my solution, although my colleague doesn’t like it:

            { field: 'd', 
              type: "date", 
              title: 'Date Captured', 
              template: '#= kendo.toString(
                new Date(data.d.getTime() + 
                    data.d.getTimezoneOffset()*60000), 
                "dd/MM/yyyy h:mm:ss tt") #', 
              width: 150},

All it does is, use JavaScript to add the time zone offset to the date, which effectively subtracts 2 hours here, correcting kendo’s weirdo automatic-incorrect-formatting of the date.

Update: An alternative solution

This one really depends on whether you use Microsoft SQL Server, as we do. When we input the data, we use the SQL GETDATE() function…

The alternate solution is simply to use GETUTCDATE() instead. Then allow the kendo grid to add the time offset as it does, which ends up displaying the correct date. i.e. since both my server and client are here in South Africa, the server will now store the date minus two hours, and the client will add on two hours.

I’m still not comfortable with this though… As I see it, using standard date-time functions, the local date should always be correct. The kendo grid is wrong to always add the time zone offset to the date, because in so doing it is assuming that the date is a UTC date, which it usually will not be.

Advertisements

About Jerome

I am a senior C# developer in Johannesburg, South Africa. I am also a recovering addict, who spent nearly eight years using methamphetamine. I write on my recovery blog about my lessons learned and sometimes give advice to others who have made similar mistakes, often from my viewpoint as an atheist, and I also write some C# programming articles on my programming blog.
This entry was posted in Programming and tagged , . Bookmark the permalink.

5 Responses to How to force (hack?) kendo-ui grid to display the correct date

  1. Jerome says:

    Hmm… I’m surprised that anyone would reblog this… I didn’t think it was so well written.

    Also, I think there is a bigger problem inherent here, it’s not specific to kendo that dates coming to the browser get treated as UTC and then incorrectly formatted. My fix, the first one which is what we used in the end, also doesn’t solve another problem: You can force a kendo grid to group by a field, but can only specify the field name to use (and can’t modify the text that will be displayed in the group summary)… so if you group by a date, even when you use this technique to change the date text displayed, the text displayed in the group summary will still show a date and time that’s out by whatever your time zone offset is. I’m still new to server-side javascript (like node), but I must say I do not like it at all. I much prefer .Net. (Actually I prefer not to do web development at all, but it’s not always my choice.)

    Like

  2. Per Clausen says:

    Another way is, provided that timestamps RX from server is in UTC, to make the timestamps appear as they were in local time.

    schema: {
    data: function (data) {
    for (var i = 0; i < data.value.length; ++i) {
    data.value[i].utc = data.value[i].utc.replace("Z", "");
    }
    return data.value;
    }
    },

    Hack: YES!

    Liked by 1 person

  3. Aditya Upadhyay says:

    I am not able to use this new Date with MVC ClientTemplate can you please let me know how I can fix it witrh MVC grid.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s