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

1 Answer 61 Views
Filter Grid TabStrip
Top achievements
Rank 1
Shawn asked on 10 Nov 2021, 01:37 PM

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")
                        .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))
                        .Resizable(resize => resize.Columns(true))
                        .HtmlAttributes(new { style = @styleGrid })
                        .DataSource(datasource => datasource
                            .Read(read => read.Action("Read_WR", "Update").Data("additionalInfo"))
                            .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

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) {

        // 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));; } } }


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?





Top achievements
Rank 1
commented on 10 Nov 2021, 02:59 PM

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.
Top achievements
Rank 1
commented on 10 Nov 2021, 03:21 PM

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?



Top achievements
Rank 1
commented on 10 Nov 2021, 03:22 PM

Sorry, that should have read...

Why is the setOptions killing the command buttons?

Top achievements
Rank 1
commented on 10 Nov 2021, 06:11 PM

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


1 Answer, 1 is accepted

Sort by
Anton Mironov
Telerik team
answered on 15 Nov 2021, 07:10 AM

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

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

Filter Grid TabStrip
Asked by
Top achievements
Rank 1
Answers by
Anton Mironov
Telerik team
Share this question