I have the below tabstrip and on a button click I am trying to select/activate the second tab programatically. Actually, I can't get it to select/activate any tabe programatically. Below my tabstrip definition below I have listed all of the things I have tried but, none of these seem to work. I am using Visual Studio 2022 and Telerik.UI.for.AspNet.Core 2022.2.510. What am I doing wrong?
@(Html.Kendo().TabStrip()
.Name("tabMain")
.Animation(animation =>
animation.Open(effect =>
effect.Fade(FadeDirection.In)))
.Items(tabstrip =>
{
tabstrip.Add().Text("Table Status")
.HtmlAttributes(new { id="tabMain-tab-1", name="tabMain-tab-1"})
.Selected(true)
.Content(@<text>
<div>
</div>
</text>);
tabstrip.Add().Text("Filters")
.HtmlAttributes(new { id="tabMain-tab-2", name="tabMain-tab-2"})
.Content(@<text>
<div>
</div>
</text>);
tabstrip.Add().Text("Bill List")
.HtmlAttributes(new { id="tabMain-tab-3", name="tabMain-tab-3" })
.Content(@<text>
<div>
</div>
</text>);
tabstrip.Add().Text("Main Data")
.HtmlAttributes(new { id="tabMain-tab-4", name="tabMain-tab-4" })
.Content(@<text>
<div>
</div>
</text>);
tabstrip.Add().Text("Details")
.HtmlAttributes(new { id="tabMain-tab-5", name="tabMain-tab-5" })
.Content(@<text>
<div>
</div>
</text>);
tabstrip.Add().Text("Reports")
.HtmlAttributes(new { id="tabMain-tab-6", name="tabMain-tab-6" })
.Content(@<text>
<div>
</div>
</text>);
tabstrip.Add().Text("Export")
.HtmlAttributes(new { id="tabMain-tab-7", name="tabMain-tab-7" })
.Content(@<text>
<div>
</div>
</text>);
})
)
I have tried all of the following but, none of these seem to work.
$("#tabMain").kendoTabStrip().data("kendoTabStrip").select(2);
$("#tabMain").kendoTabStrip().select(2);
$("#tabMain").kendoTabStrip().data("kendoTabStrip").activateTab(2);
$("#tabMain").kendoTabStrip().activateTab(2);
var tabToActivate = $("#tabMain-tab-2");
$("#tabMain").kendoTabStrip().data("kendoTabStrip").activateTab(tabToActivate);
var tabToActivate = $("#tabMain-tab-2");
$("#tabMain").kendoTabStrip().activateTab(tabToActivate);
var tabStrip = $("#tabMain").kendoTabStrip().data("kendoTabStrip");
tabStrip.select("li:1");
var tabStrip = $("#tabMain").kendoTabStrip().data("kendoTabStrip");
tabStrip.select(1);
var tabStrip = $("#tabMain").kendoTabStrip().data("kendoTabStrip");
tabStrip.select((tabStrip.tabGroup.children("li").length - 5));
var tabStrip = $("#tabMain").data("kendoTabStrip");
tabStrip.select((tabStrip.tabGroup.children("li").length - 5));
var tabStrip = $("#tabMain").kendoTabStrip().data("kendoTabStrip");
tabStrip.activateTab((tabStrip.tabGroup.children("li").length - 5));
var tabStrip = $("#tabMain").data("kendoTabStrip");
tabStrip.activateTab((tabStrip.tabGroup.children("li").length - 5));
var tabStrip = $("#tabMain").kendoTabStrip().data("kendoTabStrip");
tabStrip.select(1);
Inspecting the tab I want to select I see:
<li class="k-state-default k-item k-tabstrip-item" id="tabMain-tab-2" name="tabMain-tab-2" role="tab" aria-controls="tabMain-2"><span class="k-loading k-complete"></span><span class="k-link" unselectable="on">Filters</span></li><span class="k-loading k-complete"></span>
<span class="k-link" unselectable="on">Filters</span>
</li>