How to display a date in multiple columns

[Aitbouhou Adam]

Hello,

I'm using a grid to display dynamic data. In one example, I need to display a date, and I need to display it in multiple columns, but with different formats. It works, but in the filter, I always have the same format.

https://stackblitz.com/edit/xjj4ajky?file=datasource.ts

Thanks

Attachment: egrid_75674513_2f64dbd4.zip

[Rajapandi Ravi]

Hi Aitbouhou,

Greetings from Syncfusion support

After reviewing your shared sample, we noticed that the OrderDate field is being used in two different grid columns. In Syncfusion EJ2 Grid, each column should have a unique field name to ensure proper functionality for features like grouping, filtering, sorting, and editing. Using the same field name in multiple columns can cause conflicts and impact these features.

To resolve this, we recommend defining a unique field name for each date column while applying different formats as needed. This approach ensures that the Grid treats them as separate fields, preventing conflicts while maintaining data integrity.

Please refer to the code example, sample, and screenshot below for more details.

Index.ts

 

let grid: Grid = new Grid({

  dataSource: data,

  columns: [

    {

      field: 'OrderDate',

      headerText: 'Date',

      textAlign: 'Right',

      width: 100,

      format:'dd/MM/yyyy'

    },

 

    { field: 'CustomerID', headerText: 'Customer ID', width: 120 },

    {

        field: 'ShippedDate',

        headerText: 'Month-Year',

        textAlign: 'Right',

        width: 100,

        format:'MM-yyyy'

      },

  ],

  height: 273,

});

grid.appendTo('#Grid');

 

 

Sample: https://stackblitz.com/edit/xjj4ajky-6xxg1ynu?file=index.ts

Screenshot:

Regards,

Rajapandi R