This is a migrated thread and some comments may be shown as answers.
Save/Load - Custom Toolbar Disappears
5 Answers 165 Views
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 22 Feb 2017, 09:47 PM

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?

 

5 Answers, 1 is accepted

Sort by
0
Accepted
Konstantin Dikov
Telerik team
answered on 24 Feb 2017, 11:20 AM
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:
Hope this helps.


Regards,
Konstantin Dikov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Joe
Top achievements
Rank 1
answered on 24 Feb 2017, 06:43 PM
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?
0
Joe
Top achievements
Rank 1
answered on 24 Feb 2017, 06:55 PM

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.

0
William
Top achievements
Rank 1
answered on 02 Sep 2020, 08:15 PM

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

0
Neli
Telerik team
answered on 04 Sep 2020, 02:23 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Joe
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Joe
Top achievements
Rank 1
William
Top achievements
Rank 1
Neli
Telerik team
Share this question
or