Work with UTC time

[ALEXANDER]

Hi dear Telerik team.
I'm trying to use grid for showing and editing grid in UTC format.

@(Html.Kendo().Grid<TelerikGridTestApp.Models.ClientViewModel>()
          .Name("Grid")
          .Columns(columns =>
          {
              columns.Bound(p => p.ClientName).Title("Name");
              columns.Bound(p => p.ClientBirthday).Format("{d:0}").Title("Start Date").HtmlAttributes(new Dictionary<string, object> { { "class", "utc-date" } });
              columns.Command(command =>
              {
                  command.Edit();
              });
          })
          .ToolBar(toolbar => toolbar.Create())
          .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ClientEditor"))
          .Pageable(pager => pager.PageSizes(new[] { 10, 20, 30, 50 }))
          .Events(e => e.DataBound("onDataBound").Edit("onEdit"))
          .HtmlAttributes(new { style = "height: 550px;" })
          .Sortable()
          .Scrollable()
          .Resizable(configurator => configurator.Columns(true))
          .Filterable()
          .DataSource(dataSource => dataSource
              .Ajax()
              .Model(model => model.Id(p => p.ClientID))
              .Create(create => create.Action("Client_Create", "Grid"))
              .Read(read => read.Action("Clients_Read", "Grid"))
              .Update(update => update.Action("Client_Update", "Grid"))
              .Sort(configurator => configurator.Add(c => c.ClientName))
          )
)

I understand that when data comes to browser, it converts to local date time of the browser. So I have to convert it back to UTC date time, and paste to the CELL of the grid.

function onDataBound() {
        $(".utc-date").each(function () {
            var text = LocalToUtc($(this).text());
            $(this).text(text);
        });
    }

Also I do the same for popup dialog

@model TelerikGridTestApp.Models.ClientViewModel

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

<fieldset>
    <legend>Client</legend>
    @Html.HiddenFor(model => model.ClientID)
    <div class="editor-label">
        @Html.LabelFor(model => model.ClientName, "Client Name")
        @Html.ValidationMessageFor(model => model.ClientName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.ClientName)
    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.ClientBirthday, "Client Birthday")
    </div>
    <div class="editor-field">
        @Html.Kendo().DatePickerFor(model => model.ClientBirthday).HtmlAttributes(new { @class = "kendo-utc-date" })
        @Html.ValidationMessageFor(model => model.ClientBirthday)
    </div>
    @Html.HiddenFor(model => model.TimeZoneOffsetMinutes)
</fieldset>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval");
}

- I change dates using "onEdit" event.

function onEdit(e) {
       if (e.model.isNew())
           return;
       var datePicker = $($("input.kendo-utc-date")).data("kendoDatePicker");
       var utcDate = datePicker .value();
       datePicker .value(toLocal(utcDate));
       var timeZoneOffsetControl = $("#TimeZoneOffsetMinutes");
       timeZoneOffsetControl.val(new Date().getTimezoneOffset())
       timeZoneOffsetControl.change();
   }

But when I press "Cancel" button or just close the dialog, the date converts back to local date in the grid. When I press "Update" button, it looks like any mechanism takes the updated date, converts it to UTC (according to my conversion) and shows on front end, but on back end I have correct date.
I figured out that the grid has a storage, and when I update the record, the grid updates the record in the storage and sends the updated record to the back end is separately. It makes sense if I update regular string or number. But What should I do in my case?

[Viktor Tachev]

Hello Alexander,

It is recommended to use the same time zone on both the server- and client-side to avoid unexpected behavior. Please check out the article below that illustrates how UTC time can be applied on the client and server. 

• https://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/editing/utc-time-on-both-server-and-client

Regards,
Viktor Tachev
Progress Telerik