igGrid UTC Dates not working | Infragistics Forums

1175

igGrid UTC Dates not working

Karthik Thiagarajan posted over 5 years ago

I've read all of the articles for UTC dates for the newer versions but they aren't working.

MVC v4.17.2.183

Here's what I got:

    @(Html.Infragistics().Grid<TaskModel>()
          .PrimaryKey("TaskApprovalId")
          .ID("GlobalTasksGrid")
          .AutoGenerateColumns(false)
          .AutoGenerateLayouts(false)
          .EnableUTCDates(true)
          .Columns(column =>
          {
              column.For(m => m.TaskApprovalId).DataType("number").HeaderText(" ").Hidden(true);
              column.For(m => m.Location).DataType("string").Width("215").HeaderText("Location");
              column.For(m => m.Task).DataType("string").Width("195").HeaderText("Task").Template("[Task Name]");
              column.For(m => m.Employee).DataType("string").Width("155").HeaderText("Employee").Template("[Employee Name]");
              column.For(m => m.ApprovalDate).DataType("date").Format("dateTime").Width("180").HeaderText("Date")
                    .Template("<div align='center'>${ApprovalDate}</div>").DateDisplayType(DateDisplayType.Local);
          })
          .Features(feature =>
          {
             feature.Updating()
                    .EnableAddRow(false)
                    .EnableDeleteRow(true)
                    .EditMode(GridEditMode.None);
          })
          .AutoCommit(true)
          .DataSourceUrl(Url.Action("GetGlobalTasks"))
          .DataBind()
          .Render()
     )

EnableUTCDates set to true. This notifies the datasource that the incoming date are in UTC format. So it should convert it into a Date object.

LocalSchemaTransform is set to true by default, which is what we want.

The ApprovalDate column is set to DateTime and the DateDisplayType is set to "local".

Unfortunately, the desired result is still the same. The UTC date stored in the database is still rendered as such to the client.

Here's the data coming from the server:

The only thing that stands out is the Metadata.timezoneOffset which I don't set myself.

Thoughts?

1175

Offline Karthik Thiagarajan posted over 5 years ago in reply to Stamen Stoychev

You are on the right track but its more like this:

- The action happened at 17:34:02.
- It was stored in the database as UTC as 22:34:02.
- It shows in the UI as 22:34:02 instead of 17:34:02.

When should I convert it to "ToUniversalTime"? When we tag the task as complete we mark the date as DateTime.UtcNow.

So should I call "ToUniversalTime" before I push it to the database? Or when I pull the date out before pushing it to the UI?
Cancel
Reply

Cancel
5513

Suggested Answer
Offline Stamen Stoychev posted over 5 years ago in reply to Karthik Thiagarajan

Hello Karthik,

Thank you for the elaborate description of the issue!

If I understood you correctly, your DateTime object represents the local time 17:34:02. Simply setting the DateTime object to Kind UTC won't convert this local time to its UTC representation. In fact it makes it wrong because the UTC time 17:34:02 would be 22:34:02 in your local time assuming you live in a time zone that is UTC+5. To convert the local DateTime 17:34:02 you should use its ToUniversalTime method. The DateTime it returns is the UTC representation of your local 17:34:02 or in this case - 12:34.02. It will then be serialized to "2019-10-15T12:34:02.513Z" and using DateDisplayTime.Local for the column will render it as 17:34:02 if your client time zone is the same as the server one.

I hope this helps! Please, let me know if you have any other questions or comments!

Best regards,
Stamen Stoychev
Cancel
Reply

Reject Answer

Cancel

1175

Offline Karthik Thiagarajan posted over 5 years ago in reply to Karthik Thiagarajan

Funny thing...setting up a formatter function and then manually setting the date works. This answer isn't correct because the documentation states it can do what I want out of the box. But here's what I applied:

function formatApprovalDate(val, record) {
        return $.ig.formatter(new Date(val), "date", "dateTime", null, false, null);
    }

@(Html.Infragistics().Grid<TaskModel>()
          .PrimaryKey("TaskApprovalId")
          .ID("GlobalTasksGrid")

          .AutoGenerateColumns(false)
          .AutoGenerateLayouts(false)
          .EnableUTCDates(true)
          .Columns(column =>
          {
              column.For(m => m.TaskApprovalId).DataType("number").HeaderText(" ");
              column.For(m => m.Location).DataType("string").Width("215").HeaderText("Location");
              column.For(m => m.Task).DataType("string").Width("195").HeaderText("Task");
              column.For(m => m.Employee).DataType("string").Width("155").HeaderText("Employee");
              column.For(m => m.ApprovalDate).DataType("string").Width("90").HeaderText("Date").FormatterFunction("formatApprovalDate")
                    .Template("<div align='center'>${ApprovalDate}</div>");
          })
          .Features(feature =>
          {
             feature.Updating()
                    .EnableAddRow(false)
                    .EnableDeleteRow(true)
                    .EditMode(GridEditMode.None);
             feature.Hiding()
                    .ColumnSettings(settings =>
                    {
                        settings.ColumnSetting().ColumnKey("TaskApprovalId").Hidden(true).AllowHiding(false);
                        settings.ColumnSetting().ColumnKey("Location").AllowHiding(false);
                        settings.ColumnSetting().ColumnKey("Task").AllowHiding(false);
                        settings.ColumnSetting().ColumnKey("Employee").AllowHiding(false);
                        settings.ColumnSetting().ColumnKey("ApprovalDate").AllowHiding(false);
                    });
          })
          .AutoCommit(true)
          .DataSourceUrl(Url.Action("GetGlobalTasks"))
          .DataBind()
          .Render()
     )

1175

Offline Karthik Thiagarajan posted over 5 years ago

So I've read a few other articles:

https://es.infragistics.com/community/forums/f/ignite-ui-for-javascript/111827/convert-utc-time-to-browser-timezone-in-iggrid

This particular one pointed to DateTime.Kind being set to Unspecified with Entity Framework. So far that assumption is true. I checked the code and sure enough it was set to that. So I changed it programmatically before serialization to Utc. But now the dates render in the UI another 5 hours past than what it is supposed to be. Date was set at 2019-10-15T22:34:02.513Z but I actually did it at 17:34:02 local time.

Seems to be going 5 hours in the wrong direction. Now I'm completely stumped. In addition, I would expect that if I change the DateDisplayType from UTC to Local I would see the dates change but I don't.
Cancel
Reply

Cancel