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?