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

Losing date formating when loading grid options

1 Answer 104 Views

Grid

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

Jérémy asked on 10 Aug 2016, 09:24 AM

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.

1 Answer, 1 is accepted

Accepted