Save/Load - Custom Toolbar Disappears

[Joe]

I have an MVC Grid, with a custom toolbar.  On that custom toolbar is a button to Save the grid options, which it does via localStorage.  A second button loads the grid options from localStoage and applies them to the grid.  Everything works except when I load the settings, my custom toolbar disappears.  It doesn't just hide the toolbar, it's completely gone.

The grid code:

@(Html.Kendo().Grid<EIWOResult>()
      .Name("EIWOGrid")
      .TableHtmlAttributes(new { @class = "table-condensed" })
      .Columns(cols =>
      {
          cols.Bound(c => c.EmpId);
          cols.Bound(c => c.LastName);
          cols.Bound(c => c.FirstName);
          cols.Bound(c => c.MiddleInitial);
          cols.Bound(c => c.SSN);
          cols.Bound(c => c.CaseNumber);
          cols.Bound(c => c.OrderNumber);
          cols.Bound(c => c.Amount).Format("{0:c}").HtmlAttributes(new { style = "text-align: right;"});
          cols.Bound(c => c.Authority);
          cols.Bound(c => c.FIPSCode);
          cols.Bound(c => c.EIWOType);
          cols.Bound(c => c.EIWODocument)
              .Title("Document")
              .ClientTemplate("<a href=\"" + @Url.Action("GetEIWODocument", "EIWO") + "?fileName=#:EIWODocument#\" target=\"_blank\">Document</a>");
          cols.ForeignKey(c => c.EIWOAction, (IEnumerable) ViewData["GarnishmentCodes"], "CodeID", "CodeDesc");
          cols.Command(c => c.Edit());
      })
      .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("EIWOStatus"))
      .Resizable(r => r.Columns(true))
      .Scrollable(s => s.Height("auto"))
      .Sortable()
      .Pageable(p => p
          .PageSizes(new List<object> { 10, 20, 30, 40, 50, "all" })
          .ButtonCount(10))
      .Filterable(f => f.Enabled(true))
      .Events(ev =>ev.DataBound("gridBound"))
      .AutoBind(true)
      .DataSource(ds => ds
          .Ajax()
          .PageSize(25)
          .ServerOperation(true)
          .Model(m =>
          {
              m.Id(d => d.PseudoPrimaryKey);
              m.Field(d => d.EmpId);
              m.Field(d => d.LastName);
              m.Field(d => d.FirstName);
              m.Field(d => d.MiddleInitial);
              m.Field(d => d.SSN);
              m.Field(d => d.CaseNumber);
              m.Field(d => d.OrderNumber);
              m.Field(d => d.Amount);
              m.Field(d => d.Authority);
              m.Field(d => d.FIPSCode);
              m.Field(d => d.EIWOType);
              m.Field(d => d.EIWODocument);
              m.Field(d => d.EIWOAction);
              m.Field(d => d.DocketNumber);
          })
          .Read(r => r.Action("GetUnprocessedEIWOs", "EIWO"))
          .Update(u => u.Action("UpdateEIWO", "EIWO"))
          .Events(e => e.RequestEnd("refreshGrid"))
      )
      .ToolBar(tb =>
      {
          tb.Custom().Name("gridFilterReset").Text("Clear Filter").HtmlAttributes(new { id = "gridFilterReset", style = "float:right;" });
          tb.Custom().Name("gridSave").Text("Save Settings").HtmlAttributes(new { id = "gridSave", style = "float:left;" });
          tb.Custom().Name("gridLoad").Text("Load Settings").HtmlAttributes(new { id = "gridLoad", style = "float:left;" });
      })
      .ColumnMenu()
      .Groupable()
)

 

And the javascript is:

$("#gridSave").click(function (e) {
            e.preventDefault();
            localStorage["kendo-EIWO-options"] = kendo.stringify($("#EIWOGrid").data("kendoGrid").getOptions());
        });

        $("#gridLoad").click(function (e) {
            e.preventDefault();

            var options = localStorage["kendo-EIWO-options"];
            if(options) {
                $("#EIWOGrid").data("kendoGrid").setOptions(JSON.parse(options));
            }
        });

 

I've also attached the grid settings themselves, copied out of localStorage and saved as a JSON file.

Any suggestions or help on keeping the toolbar from disappearing?

 

[Konstantin Dikov]

Hi Joe,

This is a limitation with the server toolbar template and the setOptions method, but you can use the approach demonstrated in the following HowTo article to persist the template:

• http://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/state/grid-preserve-server-toolbar-template-after-set-options

Hope this helps.


Regards,
Konstantin Dikov
Telerik by Progress

[Joe]

Well this is kind of a bummer...  I have to basically re-tool my grid, which was a PITA to get it working and looking the way I wanted...  Will this limitation with setOptions ever be fixed?

[Joe]

I wish we could edit our responses here... ugh...

 

Anyways, this wasn't as bad as I thought it was going to be and works.  Thank you.

[William]

Hello,

I know this is an old thread (more that 3 years) but I'm running into similar issues and cat seem to find a fix for this.

I was able to re-load the toolbar, but the issue that I'm having now is that all the customization I had done for the filters is not persisted after reloading the options.

Additionally, is there an article that explains what is persisted and what is not after reloading the options?

Thanks,

-- William

[Neli]

Hi William,

I would suggest you take a look at the following Demo where the persisting state of Grid is demonstrated. 

- https://demos.telerik.com/aspnet-mvc/grid/persist-state

Also, the following How-To articles from the Kendo UI for jQuery documentation could be helpful:

- https://docs.telerik.com/kendo-ui/knowledge-base/grid-automatically-persist-state

- https://docs.telerik.com/kendo-ui/knowledge-base/grid-filters-are-not-correctly-persisted-after-saving-and-loading-the-grid-state

I hope this helps.

Regards,
Neli
Progress Telerik