Tab strip tabs with one grid per tab and persistent filters breaks command.Custom buttons

[Shawn]

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

 

 

[Shawn]

Looks like it is the setOptions method on the individual grid that kills the command.Custom buttons.  I commented out the setOptions for 3 of the grids and only applied it to one grid.  The buttons were only impacted on the grid that I called the setOptions on.

[Shawn]

To simplify things, I used a different page in my web application that contains just a single grid.  Again, I added the getOptions into the onDataBound event and the document.Ready function I added the setOptions.  After setting some filter items, the localStorage file was created.  On page refresh (F5) the getOptions successfully applied the filter settings, but the command.Custom buttons are non functioning.

Why is the getOptions killing the command buttons?

Thanks,

Shawn

[Shawn]

Sorry, that should have read...

Why is the setOptions killing the command buttons?

[Shawn]

Never mind!  I finally did the right magical incantation in Google search and found this problem and explanation on how to solve it.

 

[Anton Mironov]

Hello Shawn,

If further assistance for anything Kendo-related is needed, do not hesitate to contact me and the team.

 

Kind Regards,
Anton Mironov
Progress Telerik