This is a migrated thread and some comments may be shown as answers.

Work with UTC time

1 Answer 135 Views
Grid
This is a migrated thread and some comments may be shown as answers.
ALEXANDER
Top achievements
Rank 1
ALEXANDER asked on 04 Sep 2018, 05:28 AM

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?

1 Answer, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 04 Sep 2018, 10:23 AM
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. 



Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
ALEXANDER
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Share this question
or