Kendo TabStrip for MVC not hiding tab content properly

331 Views Asked by At

I have Telerik Kendo TabStrip on my page with the following markup:

@(Html.Kendo().TabStrip().Name("FilterTabs")
            .Animation(a =>
            {
                a.Enable(true);
                a.Open(c =>
                {
                    c.Expand(ExpandDirection.Vertical);
                    c.Fade(FadeDirection.In);
                    c.Duration(400);
                });
                a.Close(c =>
                {
                    c.Reverse(true);
                });
            })

            .Items(t => t.Add().Text("Simple Filter").Selected(true)
            .ContentHtmlAttributes(new { @class = "edit-pool-tab", @style = "min-height: 100px;" })
            .Content(@<partial name="_FilterSimple" for="@Model" />))
            .Items(t => t.Add().Text("Extended Filter")
            .ContentHtmlAttributes(new { @class = "edit-pool-tab", @style = "min-height: 100px;" })
            .Content(@<partial name="_FilterExtended" for="@Model" />))
            )

It behaves incorrectly in the following ways:

  1. When the page is loaded, the content of tab 1 (simple filter) are shown (which is correct) but both tab headers have the unselected look.
  2. If I click on tab 2, the tab 2 header will get the selected look, but both contents of tab 1 and tab 2 are shown.

Only after I click back on tab 1, and then back on tab 2, will I get the correct behavior - contents of tab 2 disappear, and then if I click on tab 2 again contents of tab 1 disappear. If I click on tab 1 first after the page loads, I get the correct behavior.

Any idea what's causing this and how to fix it?

EDIT: I was suspecting this might be caused by the animation setings, so I removed the whole Animation section. It didn't help.

1

There are 1 best solutions below

0
On BEST ANSWER

Apparently the .Selected(true) part is wonky, but the following workaround did the trick:

 jQuery(document).ready(function () {
        var tabstrip = $("#FilterTabs").kendoTabStrip().data("kendoTabStrip");
        tabstrip.select(0);
     }
    );