Date Field Format Not Displayed Correctly When Editing in Grid

[Fernando]

Dear Syncfusion Support,

I am encountering an issue with the Syncfusion Grid. When I click to edit a date field, the format of the date is not displayed correctly. The date column is configured to display in the format dd/MM/yyyy, but upon entering edit mode, the format appears incorrectly, as shown in the image below.

Could you kindly assist in resolving this issue so that the date field always displays in the correct format when in edit mode?

Thank you for your support!

Fernando

    var EvidenciaChildGrid = new Syncfusion.EJ2.Grids.Grid()
            {
                Id = "GridEvidencias",
                QueryString = "LojaUnidadeId",
                Width = "100%",
                Locale = "pt",
                ActionComplete="onCrudAction",
                EditSettings = new Syncfusion.EJ2.Grids.GridEditSettings() { AllowAdding = true, AllowEditing = true },
                Toolbar = new List<string>() { "Add", "Edit", "Cancel", "Update" },
                Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="UsuarioUpload", AllowEditing=false, HeaderText="Usuário", Width="150" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="DataUpload", EditType="Datepicker", Format="dd/MM/yyyy", HeaderText="Data Upload", Width="150" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="Descricao", HeaderText="Descrição", Width="300" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="NomeArquivo", AllowEditing=false,HeaderText="Arquivo", Width="150" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Template="#btnUpload", AllowEditing=false, TextAlign=TextAlign.Center, Width="50" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Template="#btnExcluir", AllowEditing=false, TextAlign=TextAlign.Center, Width="50" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field = "Recebido", AllowEditing = acessoRecebido, HeaderText = "Recebido", DisplayAsCheckBox = true, EditType = "booleanedit", TextAlign=TextAlign.Center, Width="70" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field = "DataRecebimento",  AllowEditing = false, Template = "#templateDataRecebimento", HeaderText = "Data Receb", Width = "100" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field = "UsuarioRecebimento", AllowEditing = false, HeaderText = "Usuário Receb", Width = "150" },
        }
    };

[Sivaranjani Rajasekaran]

Hi Fernando,

Greetings from Syncfusion support!

After reviewing your code snippet, we found that the issue occurs because the EditType for the date column is not correctly applied in the Syncfusion EJ2 Grid for ASP.NET Core.

In your code, the EditType for the date column is set as "Datepicker", but this might not be recognized as a valid editor type. The correct identifier for a date picker in Syncfusion EJ2 Grid is "datepickeredit".

Code Example :

 new Syncfusion.EJ2.Grids.GridColumn()

        {

            Field = "DataUpload",

            EditType = "datepickeredit",  // Corrected EditType for date picker

            Format = "dd/MM/yyyy",

            HeaderText = "Data Upload",

            Width = "150"

        },

Documentation Link : https://ej2.syncfusion.com/aspnetcore/documentation/grid/editing/edit-types#customize-datepicker-component-of-datepickeredit-type

Kindly update the EditType in your column definition and check if the issue persists. Please let us know if you need further assistance.

Regards,

Sivaranjani R.

[Fernando]

Hi Sivaranjani,

The date is now in the correct format; however, the day and month are swapped, as shown in the attached screenshot. Could you please check this issue?

Thank you

[Sivaranjani Rajasekaran]

Fernando,

In ASP.NET Core Syncfusion EJ2 Grid, When you set the editType property of a column to "datepickeredit", the Syncfusion EJ2 Grid automatically renders a DatePicker component when the column enters edit mode. However, if you need to customize the behavior of the DatePicker, such as specifying a particular date format, you can achieve this using the columns->edit->params property.

By setting the Format option in both the column and the Edit-> DatePicker parameters, the grid will consistently present dates in the "dd/MM/yyyy" format.

Modify your column definition as follows:

Code Example : 

new Syncfusion.EJ2.Grids.GridColumn()

{

    Field = "DataUpload",

    HeaderText = "Data Upload",

    Width = "150",

    Format = "dd/MM/yyyy",

    EditType = "datepickeredit",

    Edit=new { @@params = new Syncfusion.EJ2.Calendars.DatePicker()

                        {  

                           Format = "dd/MM/yyyy",

                        } }

},

The provided configuration will ensure Dates will consistently appear in the "dd/MM/yyyy" format, whether they are simply viewing them or editing them within the grid.

Documentation link : https://ej2.syncfusion.com/aspnetcore/documentation/grid/editing/edit-types#customize-datepicker-component-of-datepickeredit-type

Please get back to us if you have any questions.