Kendo grid is not displaying correct time

Question

I have a kendo grid and I am displaying time in one column as shown in pic enter image description here

but whenever I update the time using edit kendo button time picker it does not display correct time although if I select 5:12 AM it save correctly in database but on update it doesn't display correct time. Some one has written that use parse function in the model definition

 parse: function (d) {
    $.each(d, function (idx, elem) {
        elem.event_time = kendo.parseDate(elem.event_time, "yyyy-mm-ddThh:mm:ss.fffz");
    });
    return d;
}

And then use {0:hh:mm tt} for formatting the column.

columns   : [
...
{
    field : "date",
    title : "Date",
    format: "{0:hh:mm tt}"
} ,
...

]

But it is still not working and it returns first event time of grid and even on page load it is not working. How to display mysql time data in kendo grid in utc or other format.

Braham Shakti Braham Shakti · Accepted Answer · 2014-07-04T08:30:56

Ok I found the answer and it is working. First of all kendo returns GMT date format and to display date in local time format, You need to modify kendo parse function like this:

 parse : function(response) {
            $.each(response, function(idx, elem) {
                if (elem.event_time && typeof elem.event_time == "string") {
                    var d=new Date(Date.parse(elem.event_time));
                    var utcdate =  new Date(d.getTime() + (d.getTimezoneOffset()*60000));
                    elem.event_time = new Date(elem.event_time).toISOString();
                }
            });
            return response;
        },

and also change the parameterMap to

parameterMap : function(options, operation) {
                  if(operation == "update") {
                     var d=new Date(Date.parse(options.models[0].event_time));
                     var utcdate =  new Date(d.getTime() + (d.getTimezoneOffset()*60000));
                     options.models[0].event_time = utcdate;
                     return { event : options.models[0] };
                  }
               }

May be you also need to add

save: function(response) {
        dataSource.fetch(function() {
          var row = dataSource.at(0);
          var d=new Date(Date.parse(row.event_time));
          //To convert to UTC datetime by subtracting the current Timezone offset
          var utcdate =  new Date(d.getTime() + (d.getTimezoneOffset()*60000));
          row.set("event_time", row.event_time); 
        });
    },

I am sure this will work for every one

Kendo grid is not displaying correct time

1 Answers