Search code examples
javascriptkendo-uiteleriktabstrip

Kendo TabStrip for MVC not hiding tab content properly


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.


Solution

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