Kendo UI chart converting dates in different browsers based on Time Zone - json

Question

I am using Kendo UI chart in one of my projects today noticed a weird behaviour in different browser, I have date on x-axis, and it is auto transforming dates in different browsers with different time zone.
Like in UTC+5 it is showing date range from 3/1/2014 to 3/31/2014 while in UTC-6 it is showing date range from 2/28/2014 to 3/30/2014.

Answer 1

Basically this is happening due to the difference between the timezones of the client and the server and the form these dates are trasnfered and re-created on both sides into Date (JS) /DateTime (.NET) objects.
Basically the whole situtation is explained in details here. The dataSource that the Chart is using is the same as the one that the Grid uses so there is not difference.
Here is some example code from a project I have which you can use. Check the requestEnd handler
#(Html.Kendo().Grid<KendoMVCWrappers.Models.Person>().Name("persons")
.DataSource(dataSource => dataSource
.Ajax()
.Events(ev => ev.RequestEnd("convert"))
.Model(model => model.Id(m => m.PersonID))
.Read(read => read.Action("GetPersons", "Home"))
.Update(up => up.Action("UpdatePerson", "Home"))
)
.Filterable()
.Columns(columns =>
{
columns.Bound(c => c.PersonID);
columns.Bound(c => c.Name);
columns.Bound(c => c.BirthDate);
columns.Command(cmd => cmd.Edit());
})
.Pageable()
.Sortable()
)
<script type="text/javascript">
function convert(e) {
if (e.response.Data && e.response.Data.length) {
var offsetMiliseconds = new Date().getTimezoneOffset() * 60000;
var persons = e.response.Data;
for (var i = 0; i < persons.length; i++) {
persons[i].BirthDate = persons[i].BirthDate.replace(/\d+/,
function (n) { return parseInt(n) + offsetMiliseconds }
);
}
}
}
</script>
And the setter code of the ViewModel. Using a setter eases the whole situation since you have to do it in multiple places (before creating an object when it is fetched from the database and when it is created from the ModelBinder).
public class Person
{
public int PersonID { get; set; }
public string Name { get; set; }
private DateTime birthDate;
public DateTime BirthDate
{
get { return this.birthDate; }
set
{
this.birthDate = new DateTime(value.Ticks, DateTimeKind.Utc);
}
}
}
Good luck!

Answer 2

Got null response error when tried to parse date as mentioned in this post in onRequestEnd.
http://www.telerik.com/support/code-library/using-utc-time-on-both-client-and-server-sides
I resolve this by parsing in datasource parse method instead of requestEnd.
parse :function(data)
{
return ConvertToUTC(data);
}
function ConvertToUTC(data)
{
// iterate over all the data elements replacing the Date with a version
// that Kendo can work with.
$.each(data, function(index, item){
if(index == "data")
{
for(i =0 ;i< item.length; i++)
{
// Days is my date property in item collection
item[i].Days = item[i].Days.replace(/\d+/,
function (n) {
var time = parseInt(n);
return parseInt(time) + new Date(time).getTimezoneOffset() * 60000;
}
);
}
}
});
return data;
}