DatePicker in Grid has weird behaviour

[Jason Leach]

I have a strange behaviour with a grid, and a "datepickeredit"

I have set the date format by using column format = "yyyy-MM-dd".  when rows are returned from the database, they look great. for example: 

            new Syncfusion.EJ2.Grids.GridColumn { Field = "SampleDue", HeaderText = "Sample Due", EditType="datepickeredit", Format="yyyy-MM-dd", Width="150" },

            new Syncfusion.EJ2.Grids.GridColumn { Field = "SampleTurnedIn1", HeaderText = "Sample 1 Turned In", EditType="datepickeredit", Format="yyyy-MM-dd", Width="150" },

so use the datetime picker:

BUT IT GETS EVEN FUNKIER WHEN I CLICK UPDATE!!

note: this only happens if it is the first entry in a given column. (not necessarily the first row, just the first data element in the column.

if I requery the database and reload the grid, the dates show fine.  but that is not an acceptable workaround...

also, nothing I have tried can seem to get rid of the 8 hour timezone addition, by deciding that my datepicker UTC while I am not. I really want a date without time... so I intercept in my C# class setter and strip the UTC time off.  should be possible to do that on the grid.

Anyone know how to format my grid so that in all three instances the date shows the same way?

[Rajapandiyan Settu]

Hi Jason,

Thanks for contacting Syncfusion support.

Kindly share the below details to proceed further on your query.

1. How could you bind the data to the Grid? Share the code details.
2. Which type of Data Adaptor you have used in the Grid?
3. Share the complete Grid code files and Syncfusion script version.
4. Share the screenshot of Network Tab when updating the data to the server.
5. Share the video demo of the reported problem.
6. If possible share a simple issue reproducible sample which will be very helpful to resolve it earlier.

Regards, 

Rajapandiyan S

[Jason Leach]

Here is a simple sample that reproduces the problem. In this sample, I fake some data, but also update it using CRUDModel to an api, just like in my real web site.

the project starts by faking three rows of data with null dates.

the date format is european yyyy-MM-dd

the two date fields are in a header template.

the date picker picks a date and shows it US format.  If you update the grid, the crud operation will update the sample data, and the grid will show the extra long date format.

if you refresh the grid, it wil reload with the saved data, and the format will be correct (if you edited the first row)

it will still look ugly if you edit the second or third row, and won't look correct until you edit the first row and refresh.

The data is temporal.. it will go away if you stop the app. Visual Studio 2022.

Attachment: SFTest_eac310b3.zip

[Rajapandiyan Settu]

Hi Jason, 

  

Thanks for your sharing the sample.

While running the sample we found that null values are bound to the SampleDate and SomeOtherDate columns. In EJ2 Grid, the Grid actions like Sorting, Filtering, and formatting on the column are based on its type.  

  

By default, the column type is set based on the first cell value’s type in the dataSource. If the first cell value is null, then the column type is set as null, and the Grid actions on this column do not work like dateCoulmn. This is the behavior of EJ2 Grid column.  

  

In that case, we suggest you to manually set the column type as date in all the DateTime fields. 

Column type: https://ej2.syncfusion.com/documentation/api/grid/column/#type 

 [index.cshtml]

    var stackedHeader1 = new List<Syncfusion.EJ2.Grids.GridColumn>() {

            new Syncfusion.EJ2.Grids.GridColumn { Field = "SampleDate", HeaderText = "Sample Date", Type="date", EditType="datepickeredit", Format="yyyy-MM-dd", Width="150" },

            new Syncfusion.EJ2.Grids.GridColumn { Field = "SomeOtherDate", HeaderText = "Some Other Date", Type="date", EditType="datepickeredit", Format="yyyy-MM-dd", Width="150" }

     }; 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SFTest-resolved-434534124.zip

Regards,
Rajapandiyan S

[Jason Leach]

That works for the display after saving.  YAY!

but it still shows the date in US format within the datepicker control when selecting a date.

[Rajapandiyan Settu]

Jason,

By using the edit params of the Column, you can apply format to the date picker edit component. Please find the below code example and documentation for your reference.

Customize the editors using params: https://ej2.syncfusion.com/aspnetcore/documentation/grid/editing/edit-types#customize-editors-using-params

@{

    var sampleDateParams = new { @@params = new { format= "yyyy-MM-dd" } };

    var someOtherDateParams = new { @@params = new { format= "yyyy-MM-dd" } };

    var stackedHeader1 = new List<Syncfusion.EJ2.Grids.GridColumn>() {

            new Syncfusion.EJ2.Grids.GridColumn { Field = "SampleDate", HeaderText = "Sample Date", Type="date", EditType="datepickeredit", Edit=sampleDateParams, Format="yyyy-MM-dd", Width="150" },

            new Syncfusion.EJ2.Grids.GridColumn { Field = "SomeOtherDate", HeaderText = "Some Other Date", Type="date", EditType="datepickeredit", Edit=someOtherDateParams, Format="yyyy-MM-dd", Width="150" }

     };  

}

 

Regards, 

Rajapandiyan S