How to get european formated date in Blazor grid column

[Patrick]

Hello,

Could you tell me how I can set the format of a date column to be European. For example, instead of 10/21/2019 I would like to have 21/10/2019. 

I tried with this instruction

 

 <GridColumn Field="Date" HeaderText="Date" Format="dd/MM/yyyy" Type="ColumnType.Date"  ></GridColumn>

and it doesn't work. The only format which seams working is "yMd" with result as "MM/dd/yyyy"

I tried also with a templated column

            <GridColumn HeaderText="Date" Width="80">

                <Template>

                    @{

                        WeatherForecast Value = (context as WeatherForecast);

                        <span>@Value.Date.ToString("dd/MM/yyyy")</span>

                    }

                </Template>

            </GridColumn>

I get the wished result with the 2nd option but I don't know how to sort the column after that.

Thank you in advance!

[Renjith Singh Rajendran]

Hi Patrick, 

Thanks for contacting Syncfusion support. 

Query 1 : how I can set the format of a date column to be European 

We suggest you to use the “Custom Format feature of Grid”. Please use the below code to apply custom format for Grid columns. 

 

 

   <GridColumn Field=@nameof(Order.OrderDate) CustomFormat="@(new { type= "date", format= "dd/MM/yyyy" })" Type="ColumnType.Date" ...></GridColumn> 

 

 

You can use custom format string to format the date values. Some of the custom formats and the formatted date values are given in the below table. 

 

Format	Formatted value
{ type=”date”, format=”dd/MM/yyyy”}	04/07/1996
{ type=”date”, format=”dd.MM.yyyy” }	04.07.1996
{ type=”date”, skeleton=”short” }	7/4/96
{ type=”dateTime”, format= ”dd/MM/yyyy hh:mm a” }	04/07/1996 12:00 AM
{ type= “dateTime”, format= “MM/dd/yyyy hh:mm:ss a” }	07/04/1996 12:00:00 AM

 

Query 2 : but I don't know how to sort the column after that. 

If you want to apply sorting for a template column. Then we suggest you to define the “Field” property for that column. Please use the code below, 

 

 

        <GridColumn Field="Date" HeaderText="Date" Width="80"> 

            <Template> 

                @{ 

                    WeatherForecast Value = (context as WeatherForecast); 

                    <span>@Value.Date.ToString("dd/MM/yyyy")</span> 

                } 

            </Template> 

        </GridColumn> 

 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Patrick]

Hi Renjith,

Thank you very much for your very quick and professional answer.

Everything is working perfectly but...

I have a side effect on the sorting process: for my test I have 2 columns each with the field "date" 

• one with the customformat 
• and a second with a templated value

When I click on the first, it's going well

but when I click on the last one, the sort is mentionned on the first column and not on the last one.

It's not very important, but I would like to mention it.

Thank you for your support.

[Vignesh Natarajan]

Hi Patrick,  

Thanks for the acknowledgement.  

Query: “I have a side effect on the sorting process: for my test I have 2 columns each with the field "date" ” 

 

EjsGrid column must have unique Field value. Two columns cannot have same Field value otherwise we will face issue while performing each and every action like filtering, sorting, grouping, CRUD etc. Because we have performed all these Grid actions based on Field value only. 

In our previous update, we have provided two solutions (customFormat and Template column with Field value) to achieve your requirement. So kindly use any one of the previously suggested solution for your requirement.  

Please get back to us if you have further queries.   

Regards, 

Vignesh Natarajan.