The ActiveTabIndex parameter can take a value -1 to denote that no tab should be selected. This can plug into the current two-way binding as well.

ActiveTabIndex works as expected when tabs are always Visible, but when you set the Visible property to false, then back to true, the ActiveTabIndex does not work.

<TelerikTabStrip @bind-ActiveTabIndex="@ActiveTabIndex" PersistTabContent="true">

    <TabStripTab Title="@TabTitle" Visible="@IsTabVisible" >

..

IsTabVisible = true;

ActiveTabIndex = 1;

I encountered this behavior in both v2.30.0 and v3.2.0

The TabStrip throws ArgumentOutOfRangeException if the first tab is not Visible.

<TelerikTabStrip>
    <TabStripTab Title="A" Visible="false">
        Tab A
    </TabStripTab>

    <TabStripTab Title="B" Visible="true">
        Tab B
    </TabStripTab>

    <TabStripTab Title="C" Visible="true">
        Tab C
    </TabStripTab>
</TelerikTabStrip>

I am using the Telerik TabStrip and am trying to make the tabs scrollable while also showing additional tabs once a button is pressed.

When the additional tabs are shown, the tabs are not scrollable. Notice that when you toggle the visibility of the tabs, the new tabs being shown do not make the tab list scrollable.

=====ADMIN EDIT=====

Here is a possible workaround for the time being - REPL link.

Hello,

I am utilizing the TabStrip component with nested custom components that have parameters. When I change tabs, the inner child component's OnParametersSet is being fired off twice.

Please research if it's possible to prevent the duplicate renders and life cycle events.

This currently happening in both my application, and in some of your demos.  If you set the focus to one of the tabs in the tabstrip, and then hit the tab key on the keyboard, it should set focus to the tabstrip content itself.  However, in some cases it sets the focus right back to the tab, so you can never navigate off of the tab with the keyboard.  

An example of this can be seen in the Overview and Scrollable Tabs demos, but it is working in position and alignment demo.  I should also note that if I open the Overview and Scrollable demos in the Repl, it also works.  So I'm not sure what is preventing it on the demo pages themselves.  Any help would be appreciated, since the same thing is happening in my projects after I upgraded the Telerik controls to v9.x.  Here are the demo links that I'm referring to.

https://demos.telerik.com/blazor-ui/tabstrip/overview

https://demos.telerik.com/blazor-ui/tabstrip/scrollable-tabs

1. Activating the second tab leads to its header having the focus (correct).
2. Using the tab key, the focus changes to the second tabs content (correct).
3. Using "Shift + Tab", the focus changes back to the header row, but to the first tab header (incorrect, the second tab header should be focused).
4. Using the right arrow key, the focus changes to the third tab header and this tab gets activated (actually correct, but confusing considering the previous point).

The problem is caused by the tab index of the tab headers not being updated properly. The first one seems to have 0 at all times, while all others stay at -1. Instead, the active tab header should have tab index 0, while all others get -1.

Content inside the tabs is narrow and elements float next to each other. For example, charts or other divs have limited width (screenshot of the issue at the end of this post).

Hi All,

I want to build a TabStip with many Tabs in multiline header like this:

, but now all headers located in a long line as shows below:

I could not found any attribute or a HeaderTemplate example to do this.

Can you please help me to do this?

I like the way Drawer is designed to support navigation.

It would be neat if TabStrip supported the same use-case. The basic idea would be that it would work like the Drawer navigation, but be presented as a tabbed interface. (Github's pull request UI works very much like this.) As this would require new syntax, I'm guessing it would be a new component such as NavTabStrip.

<TelerikRootComponent>

    <TelerikNavTabStrip Data="@NavigablePages">
        <NavTabStripContent>
            @Body
        </NavTabStripContent>
    </TelerikNavTabStrip >

</TelerikRootComponent>

Accessibility issue for TelerikTabStrip (3.6.0)

Issue is found in the attached png file.

<TelerikTabStrip TabPosition="@TabPosition.Top">
    <TabStripTab Title="Handoff">
        <VideoHandoff></VideoHandoff>
    </TabStripTab>
    <TabStripTab Title="Handoff Status">
        <VideoHandoffStatus></VideoHandoffStatus>
    </TabStripTab>
</TelerikTabStrip>

Hi all,

Could you please add the OnBeforeActiveTabIndexChange event and allow cancellation (prevent) of ActiveTabIndexChanged in the handler?

I saw an example in the doc about how to prevent tab (index) change, but it is not sufficient because of:

- event if you won't change the tab index, the active tab is still being destroyed and recreated;

- we want to avoid keeping the tab in memory by using the PersistTabContent flag;

 We need to prevent tab switching by showing the user a confirmation and reacting to the user's choice. We need to prevent the tab switching - not to post react and apply any kind of crutches.

To deactivate all tabs I have to set the ActiveTabIndex parameter to -1.

This was working up to version 4.6.0. After that version I start getting an error:

Here is an example with 4.6.0 where it is working:

https://blazorrepl.telerik.com/QSPuvKvI06m6AhF929

Here is an example with the current version:

https://blazorrepl.telerik.com/mIvOlqlI062NR9Vi59

Support for adding Unicode characters (such as a warning sign, &#9888;) to the Title of tab strips.

Our scenario is we require specific setup to be done on each tab strip. We would like to ability to add an indicator next to the title of the tab to denote that setup is required.

Here is a REPL test page. If the user navigates forwards and backwards via the Wizard buttons, the TreeView checkboxes persist their state. If the user navigates via the Stepper, the checkbox state is not retained.

The issue is triggered by the TabStrip.

A possible workaround is to prevent Stepper clicks with CSS:

.k-tabstrip .k-wizard .k-stepper .k-step {
  pointer-events: none;
}