Syncfusion Grid DateTimePicker submits value offset by 6 hours (timezone issue) in .NET 8 MVC batch editing

[Lukas Lapinskas]

I'm using Grid component that dynamically configures, displays and edits columns of a SQL table. It's working impressively so far. 

At the moment, I'm encountering just one issue. When I go to edit a value that uses the Syncfusion.EJ2.Calendars.DateTimePicker,  If it helps to know, the Data for the rows is a public IEnumerable<dynamic> Data { get; set; } property.

What happens is when I go to the table, it does display the date property. Even when I click to edit it, make the edit, and unclick the cell, everything is still good. The issue occurs when I click Update button to actually preform the edit. The action receives the date and I can see the date is offset forward by 6 hours. After update if I refresh the page, I see the 6 hours time added. So if date was 2025-12-31 00:00:00 ​and I entered 2025-12-31 06:00:00, ​upon update and refresh it displays 2025-12-31 12:00:00.

I tried to add multiple variations of serverTimezoneOffset = 0 ​and = 6​, but it made things even more weird. For example, it would display the value correctly, but double clicking to edit would increment it before I even type something. Then I double click it again and it would increment it more.

I really just want the exact date that came from the database to be displayed (as it does now) and the edited value submitted exactly as I typed. 

What's going on here?

HTML view:

@section Scripts {
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            var grid = document.getElementById('Grid').ej2_instances[0];
            grid.dataSource = new ej.data.DataManager({
                json: grid.dataSource,
                batchUrl: '@Url.Action(nameof(DataProcessingController.Batch), ControllerHelper.GetName<DataProcessingController>(), new { PipelineRunId = Model.PipelineRunId })',
                adaptor: new ej.data.RemoteSaveAdaptor()
            });
        });


        function onActionComplete(args) {
            if (args.requestType === 'batchsave')
                toastr.success('Saved.');


            if (args.requestType === 'paging')
                localStorage.setItem('gridPageSize', this.pageSettings.pageSize);
        }


        function onActionFailure() {
            toastr.error('Update failed.');
        }


        function onCreated() {
            const savedPageSize = localStorage.getItem('gridPageSize');


            if (savedPageSize)
                this.pageSettings.pageSize = parseInt(savedPageSize);
        }
    </script>
}
<div class="d-flex align-items-end">
    <h1>Processing</h1>
    <div class="ms-2 mb-2 text-muted">@Model.IssueMessage</div>
</div>


<ejs-grid id="Grid" dataSource="@Model.Data" allowPaging="true" allowResizing="true" clipMode="EllipsisWithTooltip"
          actionFailure="onActionFailure" actionComplete="onActionComplete" created="onCreated"
          toolbar="@(new List<string> { "Update", "Cancel" })">
    <e-grid-pagesettings pageSize="15" pageSizes="@(new string[] { "1", "5", "15", "25", "50", "100", "250", "500" })"></e-grid-pagesettings>
    <e-grid-editSettings allowEditing="true" mode="Batch" showConfirmDialog="false"></e-grid-editSettings>
    <e-grid-selectionsettings mode="Cell" type="Multiple"></e-grid-selectionsettings>
    <e-grid-columns>
        @foreach (var col in Model.ColumnProperties)
        {
            bool isPrimary = col.Name == Model.PrimaryKeyColumnName;
            bool isReadOnly = isPrimary || col.Name == "PipelineRunIdentifier" || col.Name == "SourceFileName";
            string editType = "defaultedit";
            string? format = null;
            string? type = null;
            var textAlign = TextAlign.Left;
            var displayAsCheckBox = false;
            var validationRules = new Dictionary<string, object> { { "required", !col.IsNullable } };
            var editParams = new object();


            if (col.DataType is "decimal" or "float" or "numeric")
            {
                // ... settingsvv
            }
            else if (col.DataType is "int" or "bigint")
            {
                // ... settings
            }
            else if (col.DataType is "bit" or "boolean")
            {
                // ... settings
            }
            else if (col.DataType is "datetime" or "datetime2" or "smalldatetime")
            {
                // TODO issue with date time.
                editType = "datetimepickeredit";
                format = "yyyy-MM-dd HH:mm:ss";
                type = "date";
                textAlign = TextAlign.Right;
                editParams = new Syncfusion.EJ2.Calendars.DateTimePicker {
                    ShowClearButton = false,
                    Format = "yyyy-MM-dd HH:mm:ss"
                };
            }
            else if (col.DataType is "date")
            {
                // ... settings
            }
            else if (col.DataType is "nvarchar" or "varchar" or "char" or "nchar")
            {
                // ... settings
            }
            <e-grid-column field="@col.Name"
                    isPrimaryKey="@isPrimary"
                    allowEditing="@(!isReadOnly)"
                    textAlign="@textAlign"
                    type="@type"
                    format="@format"
                    validationRules="@(new { required = !col.IsNullable })"
                    editType="@editType"
                    edit="@(new { @params = editParams })"
                    autoFit="true">
            </e-grid-column>
        }
    </e-grid-columns>
</ejs-grid>

[Joseph Christ Nithin Issack]

Hi Lukas,

Greetings from Syncfusion support.

Based on your query, when editing date values in an EJ2 Grid configured with Batch Editing, the date values are automatically converted to the local time zone—even when using serverTimezoneOffset = 0. We would like to clarify that this behavior is expected. By default, the EJ2 Grid converts all DateTime values to UTC format before sending the updated data to the server.

Since your requirement is to send the exact same date value to the server without any automatic time zone conversion, you can achieve this by manually adjusting the date during the cellSaved event. This event allows you to intercept the value before it is finalized, giving you the opportunity to apply the necessary offset based on your target time zone.

Please refer to the below code example:

 

function cellSaved(args) {

    if(args.column.type == "datetime") {

        // we have increased the time based on Indian time zone (+5hr 30 mins)… In the same way, you can increase the time based on your time zone (-6hrs 00mins)…

        // convert the hours based on your timezone

        args.value.setHours(args.value.getHours() + 5);

        // convert the minutes based on your timezone

        args.value.setMinutes(args.value.getMinutes() + 30);

    }

}

 

Regards,

Joseph I.