This is a migrated thread and some comments may be shown as answers.

Kendo Grid - Date column format changed after resetting data

3 Answers 83 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 11 Dec 2017, 11:35 AM

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

3 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 13 Dec 2017, 06:30 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Raff
Top achievements
Rank 1
Iron
answered on 20 Jun 2021, 04:12 PM

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

0
Georgi Denchev
Telerik team
answered on 22 Jun 2021, 11:00 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Raff
Top achievements
Rank 1
Iron
commented on 22 Jun 2021, 11:39 AM

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
Telerik team
commented on 24 Jun 2021, 07:52 AM

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
Top achievements
Rank 1
Iron
commented on 24 Jun 2021, 10:45 AM

Hi Georgi, I understand, thank you for the update.
Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Raff
Top achievements
Rank 1
Iron
Georgi Denchev
Telerik team
Share this question
or