One can generally loop through a collection of items to create several TabStrip instances as shown in the Tabs Collection article.

However, when I am dynamically adding or removing tabs I am hitting a variety of problems targeting:

• The active tab is not correctly set;
• The focus is not always set on the active tab;
• Upon adding/removing a tab, all tabs are re-created and thus their content cannot be persisted;

Please add support for dynamic tabs.

We have recently update to version 7.0.0 of Telerik for Blazor controls.
We have also access to Progress ThemeBuilder application which we use to customize the default Material theme.

After the update to version 7 and also upgrading and compiling the new theme file for our application, TabStrip items fail to display the correct css and defaults to the theme's original css.

ThemeBuilder produces rules for the tab item items with the following path

.lvs-tabstrip.k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items.k-reset.k-tabstrip-items-start .k-item.k-tabstrip-item

where the actual control generates the following

.lvs-tabstrip.k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items.k-reset.k-tabstrip-items-start .k-item

As you can see it is missing the k-tabstrip-item class and the custom theme fails to render correctly. Either Telerik blazor libary did not add this extra class to each tab item or theme builder is inserting this class when it should not. 

I can place this extra class on each TabStripTab element on its Class property, but I feel this is something that the actual Telerik for Blazor libray should do.

Looking at the source code of Telerik for Blazor library, the TabStipTab component generates add the k-item as default and then applies the value of property ClassToRender and its value is 

$"{ActiveCssClass} {DisabledCssClass} {Class} {FirstItemClass} {LastItemClass}".Trim()

The Class is an empty string, which I currently use to "fix" the problem but I certainly would like a better solution like a real fix :) 

Thank you telerik team

Description

When the user selects an empty tab and then switches to another tab, the empty tab remains highlighted (appears as if it's still selected).

Reproduction

Reproduction: https://blazorrepl.telerik.com/mRkVczaV02S9QkmJ28

Steps:

1. Select the second tab (which has no content).
2. Select the first tab.

Both tabs are highlighted as selected.

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

When I am dynamically adding or removing tabs I am hitting a variety of problems targeting:

The active tab is not correctly set

the focus is not always set to the active tab

upon adding/removing a tab all tabs are re-created and their content is not persisted

This is causing some data loss, picklist filter loss, lag time when opening and closing tabs

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.

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.

Greetings.

I think I found a minor bug when using the TabStrip component. If you have something like this:

<TelerikTabStrip>
	<TabStripTab Title="First tab">
		<p>First content</p>
	</TabStripTab>
	<TabStripTab Title="Second tab">
		<p>Second content</p>
	</TabStripTab>
	<TabStripTab Title="Third tab">
		
	</TabStripTab>
 </TelerikTabStrip>

And you click the tab without content, it stays selected.

Regards

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;
}

Hello

Many times when removing a TabItem manually, we need to update some parameter or trigger some event. I think this is a missing feature for the TabStrip Component and should be added as soon as possible. I made a Custom Version of the TabStrip and added this functionality (see the unrelined Lines below):

In TelerikTabStrip.razor.cs

        /// <summary>
        /// Fires when a tab has been removed.
        /// </summary>
        [Parameter]
        public EventCallback<int> TabRemoved { get; set; } 

void ITabContainer.RemoveTab(ICustomTab tab)
        {
  int tabIndex = Tabs.IndexOf(tab);
            if (PersistTabContent)
            {
                PersistedTabs.Remove(tab);
            }

            Tabs.Remove(tab);

  if (TabRemoved.HasDelegate)
                TabRemoved.InvokeAsync(tabIndex);

        }

This way we can handle the event of removing the TabItems manually and trigger additional actions.

What also could help is triggering the ActiveTabIndexChanged whenever a new TabItem is added or removed.

Thanks

BR

Besir

Hello,

Please add a new TabStrip event for user navigation that can be cancelled via the event arguments (e.g. args.IsCancelled = true).

Currently, we can use ActiveTabIndexChanged and not update the ActiveTabIndex value. However, this only works if ShouldRender() returns true.

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>

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.

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 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>

At the moment, when tabs hide their components are removed, so when you go back to a tab, it initializes again  - for example, the OnInitializedAsync event fires where you fetch data, so you have to fetch the data again.

This behavior should be controlled through a property so one can keep the original behavior where the components are cleared from the DOM and memory.

Perhaps an option can be added where tabs are initialized not on initial load, but upon first activation only. Maybe the feature can become something like an enum - LoadMode="InitialRender|FirstRender|EveryRender" (working title off the top of my head).

At the moment, a solution you can use is to send the data to the tab from its contents through an event, and to pass it to them as a Parameter so you can check for it before fetching data.