Problems trying to activate Kendo UI Tabstrip tab programatically

[Richard]

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>

[Momchil]

Hi Richard,

Thank you for providing a detailed description of the problem.

To resolve the issue, omit the kendoTabStrip() method when getting a reference to the TabStrip.

var tabStrip = $("#tabMain").data("kendoTabStrip");

The kendoTabStrip() method is used to manually create a new Kendo TabStrip instance. When working with Telerik UI TabStrip, however, the HtmlHelper wrapper creates that instance automatically. That is why the following code creates a new empty Kendo TabStrip and invoking its select() method yields no results since there are no tabs to select.

$("#tabMain").kendoTabStrip().data("kendoTabStrip");

Here are some useful documentation articles about:

• Referencing client-side objects.
• The differences between Kendo Widgets and Telerik UI helpers.

And here is a short REPL demo demonstrating programmatically switching tabs, for your reference.

ASP.NET Core REPL - ASP.NET Core Components Playground & Testing - Telerik

I hope you find this information useful. Let me know if I can assist you further.

 

Kind Regards,
Momchil
Progress Telerik