Okay, here is what I have and I'll try to describe it as best I can here.
I have an ASP.NET MVC page that contains a Tab Strip (with 4 tabs). Each one of the tabs contain a kendo.grid. Each grid is basically identical looking with the only difference being the data source it is grabbing the model data. Each grid has 4 buttons defined with command.Custom.
Here is one of the tab/grid sections...
tabstrip.Add().Text("Product A")
.Selected(@bWR)
.Content(@<text>
@(Html.Kendo().Grid(Model)
.Name("updategrid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Hidden(true);
columns.Bound(p => p.AllowEditDelete).Hidden(true);
columns.Bound(p => p.AllowDeploy).Hidden(true);
columns.Command(command =>
{
command.Custom("DeployA").Text("<span style='margin-left:auto;margin-right:auto'/>").Click("showDeploy");
command.Custom("EditA").Text("<span style='margin-left:auto;margin-right:auto'/>").Click("showEdit");
command.Custom("EraseA").Text("<span style='margin-left:auto;margin-right:auto'/>").Click("showErase");
command.Custom("DeleteA").Text("<span style='margin-left:auto;margin-right:auto'/>").Click("showDelete");
}).Locked(true).HtmlAttributes(new { style = "background-color: lightgrey;" }).Width(125).MinResizableWidth(125); ;
columns.Bound(p => p.Product).Width(180);
columns.Bound(p => p.Version).Width(100);
columns.Bound(p => p.TargetVersion).ClientTemplate("<span title='#= TargetVersion #'>#= TargetVersion #</span>").Width(245);
columns.Bound(p => p.Name).Width(100);
columns.Bound(p => p.Description).Width(210);
columns.Bound(p => p.File).ClientTemplate("<span title='Click to download'><a href='https://*******/updates-blob-container/" + "#= File #'><u>#= File #</u></a></span>").Width(150);
columns.Bound(p => p.Created).Filterable(x => x.UI("datePicker")).Width(100);
columns.Bound(p => p.Pilot).ClientTemplate("#= Pilot ? '<span style=\"color: green; \">✔</span>' : '' #").Width(100);
columns.Bound(p => p.Deployed).Width(120);
columns.Bound(p => p.Success).Width(120).ClientTemplate("<font color=green><a href='" + Url.Action("Success", "UpdateQueue") + "/#= Id #'><u>#= SuccessCount # (#= kendo.toString(Success,'n0') #%)<u></a></font>");
columns.Bound(p => p.Failure).Width(120).ClientTemplate("<font color=red><a href='" + Url.Action("Failure", "UpdateQueue") + "/#= Id #'><u>#= FailureCount # (#= kendo.toString(Failure,'n0') #%)<u></a></font>");
columns.Bound(p => p.Pending).Width(120).ClientTemplate("<font color=blue><a href='" + Url.Action("Pending", "UpdateQueue") + "/#= Id #'><u>#= PendingCount # (#= kendo.toString(Pending,'n0') #%)<u></a></font>");
})
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Pageable(pager => pager.Refresh(true))
.Sortable()
.Scrollable()
.Filterable()
.Selectable()
.Resizable(resize => resize.Columns(true))
.HtmlAttributes(new { style = @styleGrid })
.DataSource(datasource => datasource
.Ajax()
.Read(read => read.Action("Read_WR", "Update").Data("additionalInfo"))
.PageSize(50)
.Model(model => { model.Id(p => p.Id); model.Field(p => p.Id).Editable(false); })
.Sort(sort => { sort.Add("Name").Ascending(); sort.Add("Version").Ascending(); })
)
.Events(events => events
.DataBound("onDataBoundA")
.FilterMenuInit("onFilterMenuInit"))
)
</text>);
This all works fine and tabbing between each grid displays the correct data and the command buttons work fine.
I am trying to introduce persistence on the filters for each grid. Based on other posts I have read here, it seems straightforward. In the onDataBound I have added the getOptions method and saved to local storage.
function onDataBoundA(e) { console.log('onDataBoundA'); // save the state of each grid. localStorage["wrGridOptions"] = kendo.stringify($("#updategrid").data("kendoGrid").getOptions()); }
And then, instead of the $(document).ready(function () I have a onTabSelect function that checks which tab has been selected and then does a setOptions.
function onTabSelect(e) { if ($(e.item).find("> .k-link").text() == 'Product A') { var wrOptions = localStorage["wrGridOptions"]; if (wrOptions) { console.log('Loading wr grid options'); var grid = $("#updategrid").data("kendoGrid") grid.setOptions(JSON.parse(wrOptions)); grid.dataSource.read(); } } }
The problem is that when I first visit the page and click on any of the command buttons, the appropriate dialog window displays. Then if I select a different tab and click on a command nothing happens. It has lost its click event. If I refresh the page (F5), the command button works. And if I again select another tab, the command button does not.
If I comment out the setOptions code, then the command buttons work normally again, but I lose filter persistence.
Any thoughts on what might be causing this?
Regards,
Shawn