Kendo Grid - Date column format changed after resetting data

[Michael]

I have grid with date columns start_date, end_date and status_date. I defined column as 

columns : [

{

   field: 'start_date',

   title: 'Start Date',

   format: '{0:dd-MMM-yyyy}'

} ,

{
   field: 'end_date',
   title: 'End Date',
   format: '{0:dd-MMM-yyyy}'
} ,

{
   field: 'status_date',
   title: 'Status Date',
   format: '{0:dd-MMM-yyyy}'
} ]

When I bind data at first time date formatted DD-MMM-YYYY (i.e. 01-Jan-2018) seems right. But when I'm trying to reset data the format has changed to DD-MM-YYYY (i.e. 01-01-2018).

var data = results;

var grid = $("#grid").data("kendoGrid");

grid.dataSource.data(data);

 

Please help to fix this. Thanks

[Stefan]

Hello, Michael,

Thank you for the provided information.

I used a similar approach based on the provided code and it is working as expected on my end:

https://dojo.telerik.com/ecoxo

If I missed an important detail please modify the example in order to reproduce the issue and I will gladly assist.

Regards,
Stefan
Progress Telerik

[Raff]

Hi,

 

I know this is an old thread, I have a current issue which is similar and not sure how to fix it.

I adjusted the example by changing the start_date on the datasource to a JSON string date because this is how the data comes from the controller, neither the grid or the charts i have been using set the date correctly after setting the data source data in this way.

If I use the datasouce.read method, it seems to work use the date formats correctly, but not if you set the data using datasource.data() method.

 

Kendo UI Snippet | Kendo UI Dojo (telerik.com)

 

Regards

Raff

[Georgi Denchev]

Hi, Raff,

Thank you for the updated dojo.

I assume the problem is with the initially loaded date? Clicking on "Set new data" seems to correctly set the data using the dataSource.data() method.

As for the initial date, you need to specify that the start_date field is of type "date" in the schema of the dataSource:

        dataSource: {
          data: [ {start_date: "2021-04-25T00:00:00",end_date: new Date(2017,1,1),status_date: new Date(2017,1,1)}],
          schema: {
            model: {
              fields: {
                start_date: {type: "date"}
              }
            }
          }
        }

This way it would be automatically converted to a Date() object and the format will work as expected.

Updated dojo: https://dojo.telerik.com/@gdenchev/EgAfOwAK 

Let me know in case I misunderstood the problem.

Best Regards,
Georgi Denchev
Progress Telerik

[Raff]

Hi Georgi,

Thanks for your response, I actually had it the wrong way around in the Dojo, the problem still exists if you set the date on the results rather than the datasource itself even with the date type set, please see the updated dojo.

 

Kendo UI Snippet | Kendo UI Dojo (telerik.com)

 

Regards

[Georgi Denchev]

Hello, Raff,

This is the expected behavior as the data added through the dataSource.data() method does not go through the parsing mechanism. In this case you have two options.

1. Recreate the entire dataSource using the new data and then utilize the grid's setDataSource method to replace the old dataSource with the new one.
2. Parse the date fields manually before you set them via the data() method.

Dojo demonstrating simple parsing:

https://dojo.telerik.com/@gdenchev/AtaGEtAS 

[Raff]

Hi Georgi, I understand, thank you for the update.