Date format is reseting on reloading kendo grid

Question

I have a issue using kendo grid. When i refresh the kendo grid with new data, column with date format is changed to default kendo format.

$("#refreshbtn").click(function(){

    $("#grid").data("kendoGrid").dataSource.data(createRandomDataOnRefresh(10));

});

Please look into this jsfiddle.

Thanks in advance.

Answer 1

According to this post, this is an expected behaviour(I don't see why, though). So in your case you can fix your issue with two ways:

1. To parse the Date property to a kendo date object with kendo.parseDate():

   You have to just proccess your result data and parse the Date properties:

   $("#refreshbtn").click(function() {
       var data = createRandomDataOnRefresh(10);
   
       for (var i = 0; i < data.length; i++) 
       {
           data[i].Date = kendo.parseDate(data[i].Date);
       }
   
       $("#grid").data("kendoGrid").dataSource.data(data);
   });
   

   Working Demo

2. Use dataSource.transport.read as a function:

   transport: {
       read: function(options) {
           options.success(createRandomDataOnRefresh(10));
       }
   }
   

   So everytime you click the Refresh button(code below) it will read again as if it was reading from a remote source, and parse all your data again the correct way.

   $("#refreshbtn").click(function() {
       $("#grid").data("kendoGrid").dataSource.read();
   });
   

   Working Demo.

Now it is up to you. I hope this helps.

Answer 2

var kendoGrid =$("#grid").data("kendoGrid");
kendoGrid.dataSource.data(createRandomDataOnRefresh(10));
kendoGrid.dataSource.read();
kendoGrid.refresh();

JSFiddle