Dates change without editing if saved twice

[Jason Leach]

I have a simple grid, with a couple date columns like this

<e-grid-column field="ActiveDate" headerText="Active Date" allowEditing="true" Type="date" EditType="datepickeredit" Format="yyyy-MM-dd" Width="150"></e-grid-column>

I am using a data manager for updates to a server/sql 

<e-data-manager json="@ViewBag.permits" adaptor="RemoteSaveAdaptor" insertUrl="@Url.Action("SavePermit", "WebCrud")" updateUrl="@Url.Action("SavePermit", "WebCrud")" removeUrl="@Url.Action("DeletePermit", "WebCrud")"></e-data-manager>

i am setting the timezone to make sure it is compatible with the server

 var serverTimeZoneDiff = @ViewBag.serverTimeOffset;

        var clientSideTimeZoneDiff = new Date().getTimezoneOffset() / 60; // get client time zone difference and convert it to hours;

        ej.data.DataUtil.serverTimezoneOffset = serverTimeZoneDiff + clientSideTimeZoneDiff;

There is a row in the database with "ActiveDate" set to 2023-01-04 00:00:00 

If i edit, and update the row, it shows the date as 2023-01-04 in PST - GMT -8, (which is where I am) and I think that's ok. 

on the server, it shows up in UTC.  which I can cope with... but would like to see it in server time, as I thought that was the point of the serverTimezoneOffset setting.

example from console.log(args.rowData["ActiveDate"]

This looks exactly as I expect it to look, and on the server the date is presented as UTC

Like I said I can cope with that, as I can convert it back to server time on the server.  wish i didn't have to but...

so now, having just saved the row, let's edit it again (just hit edit, then update with no changes)... and it produces a different result

from the console.log

now it shows the time as 8 hours ahead.  still claims to be pacific standard.  If I look on the server now, it is also 8 hours ahead, but in UTC.  this I can not convert back to server time, as it is 16 hours from the original server time, not 8

so... help.please.

[Rajapandi Ravi]

Hi Jason,

Greetings from syncfusion support

From you’re your update, we could see that you like to display the UTC datetime value which was defined in the controller. By default, in EJ2 Grid the dateTime is shown with respect to the user device’s time zone(In the grid source, we are using JavaScript Date() function, so it will convert automatically). If the grid handles the date of UTC format, then we have converted this UTC time into user device’s time zone in the source which is finally displayed in the grid.

To overcome the problem, we suggest you define the Json string date format in controller in your application and then you must set serverTimezoneOffset as 0 in the load event of Grid to display the UTC time which was defined in controller. Please refer the below code example and sample for more information.

 

<ejs-grid id="Grid" allowPaging="true" load="onLoad" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })">

 

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>

 

    <e-grid-columns>

        .  .  .  .  .  .  .  . . .  .

        .  .  .  .  .  .  .  .  .  . .

        <e-grid-column field="OrderDate" headerText="Order Date" format="M/d/y hh:mm a" editType="datepickeredit" width="150"></e-grid-column>

      .  .  .  .  .  .  .  . . .  .

      .  .  .  .  .  .  .  .  .  . .

   </e-grid-columns>

</ejs-grid>

<script>

    function onLoad() {

        ej.data.DataUtil.serverTimezoneOffset = 0;

    }

</script>

 

 

HomeController.cs

 

public static List<Orders> getAllRecords()

            {

                if (order.Count == 0)

                {

                    int code = 10000;

                    for (int i = 1; i < 10; i++)

                    {                                                                                                  //please refer the below screenshot to refer this defined UTC in the Grid

                        order.Add(new Orders(code + 1, "ALFKI", i + 0, 2.3 * i, "2021-04-15T23:40:00.000Z", "Berlin", "Denmark"));

                        order.Add(new Orders(code + 2, "ANATR", i + 2, 3.3 * i, "2044-06-01T13:20:00.000Z", "Madrid", "Brazil"));

                        order.Add(new Orders(code + 3, "ANTON", i + 1, 4.3 * i, "2021-06-15T20:10:42.000Z", "Cholchester", "Germany"));

                        order.Add(new Orders(code + 4, "BLONP", i + 3, 5.3 * i, "2020-04-15T00:00:00.000Z", "Marseille", "Austria"));

                        order.Add(new Orders(code + 5, "BOLID", i + 4, 6.3 * i, "2021-04-15T23:40:00.000Z", "Tsawassen", "Switzerland"));

                        code += 5;

                    }

                }

                return order;

            }

 

Screenshot:

If you still face the issue, please share your issue scenario in video demonstration format.