Setting initially selected tab on TabStrip

[Ryan]

Is there a way to select which tab to initially select when creating the KendoTabStrip?  I would like to optionally start on the 2nd or 3rd tab when the page loads (without loading the content from the first tab at all).  Is this possible?

[Dimiter Madjarov]

Hi Ryan,

Yes, you could achieve this. You just have to add the k-state-active class to the item, that you want to be initially selected.

E.g.

<ul>
    <li>First Tab</li>
    <li>Second Tab</li>
    <li class="k-state-active">Third Tab</li>
</ul>

 

Kind regards,
Dimiter Madjarov
the Telerik team

[Chris]

Useless : 

 

<div id="tabstrip">
    <ul>
        <li>Tab 1</li>
        <li class="k-state-active">Tab 2</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
</div>

<script>
    var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
 

    selectedItem = tabStrip.select(); // <--------- return length = 0 

 

     

[Neli]

Hi Chris,

The select method returns the currently selected tab. Thus, length will be 0 in case there is no selected tab in the TabStrip.

You can check the Dojo linked here when a tab is selected, and the button is clicked the result has length 1.

Let me know in case you have additional questions.

Regards,

Neli

[Andrew]

Note that, since 2022.2, you no longer add the class k-state-active on the initially selected tab. Instead, you add the class k-active.

[Neli]

Hi Andrew,

Indeed, the active class has been changed. Thank you for pointing that.

For convenience below is the list with the updated Kendo state classes.

- https://docs.telerik.com/kendo-ui/styles-and-layout/components-rendering-overview#state-classes

Regards,

Neli