Losing date formating when loading grid options

[Jérémy]

Hi everyone,

 

When I load a page that contains a Kendo grid, I check if there is a state saved in the localStorage of the user. If so I set these options to the grid.
Here is my code :

var grid = $("#" + gridName).data("kendoGrid");
                var options = localStorage["kendo-" + gridName];
                if (options) {
                    var toolBar = $("#" + gridName + " .k-grid-toolbar").html();
                    grid.setOptions(JSON.parse(options));
                    $("#" + gridName + " .k-grid-toolbar").html(toolBar);
                    $("#" + gridName + " .k-grid-toolbar").addClass("k-grid-top");
                }

 

My issue is : when the grid contains a template that format a date, the format is not applied.

Here is the code of my grid :

@(Html.Kendo().Grid<RepairCheckViewModel>()
      .Name("GridOpenCalls")
      .Columns(columns =>
      {
          columns.Bound(c => c.IntId).Title(Resources.TicketId);
          columns.Bound(c => c.RepairCheck.Engineer).Title(Resources.Engineer);
          columns.Bound(c => c.RepairCheck.EpId).Title(Resources.EPId);
          columns.Bound(c => c.RepairCheck.ProductDescription).Title(Resources.ProductDescription);
          columns.Bound(c => c.ReceptionDate).Title(Resources.ReceptionDate);
          columns.Bound(c => c.RepairCheck.MaterialStatus).Title(Resources.HardwareStatus);
          columns.Bound(c => c.RepairCheck.MaterialSite).Title(Resources.HardwareSite);
          columns.Bound(c => c.RepairCheck.MaterialLocalisation).Title(Resources.HardwareLocation);
      })
      .ToolBar(tools =>
      {
          tools.Excel();
      } )
      .Excel(excel => excel
          .FileName("OpenCalls.xlsx")
          .Filterable(true)
          .ProxyURL(Url.Action("Export_Save", "Base"))
          .AllPages(true)
      )
      .Events(e => e.DataBound("resolveGrouping").DataBound("saveState"))
      .Resizable(resize => resize.Columns(true))
      .Sortable()
      .Groupable(group => group.Enabled(true))
      .Filterable(filtr => filtr.Enabled(true))
      .Pageable(pageable => pageable
          .Refresh(true)
          .PageSizes(true)
          .ButtonCount(5)
          .PageSizes(new[] {30, 60, 100})
      )
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(30)
          .ServerOperation(true)
          .Read(read => read.Action("GetOpenEpsdTickets", "Dashboard"))

      )
      .ClientRowTemplate(
          "# if (RepairCheck.MaterialStatus == \"USE\") {# <tr class=\"highlight\"> #}else{# <tr> #}#" +
                  "#var groups = $(GridOpenCalls).data('kendoGrid').dataSource.group().length;#" +
        "#if(groups > 0) {#" +

        "#= new Array(groups + 1).join('<td class=\"k-group-cell\"></td>') #" +
        "#}#" +

          "<td>#= (IntId == null) ? ' ' : IntId #</td>" +
          "<td>#= (RepairCheck.Engineer == null) ? ' ' : RepairCheck.Engineer #</td>" +
          "<td> #=RepairCheck.EpId# </td>" +
          "<td> #=RepairCheck.ProductDescription# </td>" +
          "<td> #=kendo.toString(kendo.parseDate(RepairCheck.ReceptionDate), 'dd/MM/yyyy HH:mm')# </td>" +
          "<td> #=RepairCheck.MaterialStatus# </td>" +
          "<td> #=RepairCheck.MaterialSite# </td>" +
          "<td> #=RepairCheck.MaterialLocalisation# </td>" +
          "</tr>"
      )
      )

 

Here is how the date is displayed : https://s10.postimg.org/4pqal9i61/date_Format.png

 

I tried to comment the js code that load the settings. If I do so, the format if the date is correct.
Can you help me ?

 

Thank you in advance.

[Dimo]

Hello Jérémy,

The provided code looks valid.

I suspect that the row template has been added after you already had some saved Grid state in the localStorage. Try clearing the localStorage and test again.

If the problem persists, please provide a runnable example for furhter inspection.

Regards,
Dimo
Telerik by Progress