Losing date formating when loading grid options

2 posts, 1 answers
  1. Jérémy
    Jérémy avatar
    11 posts
    Member since:
    Dec 2013

    Posted 10 Aug Link to this post

    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.

  2. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 12 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
Back to Top