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:
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.
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);
}
);