Completed
Last Updated: 11 Dec 2024 14:09 by ADMIN
Release 2025 Q1 (Feb)
Created by: Michael
Comments: 1
Category: TabStrip
Type: Bug Report
6

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.

Unplanned
Last Updated: 28 Nov 2024 16:03 by Ricardo
Created by: Chris
Comments: 3
Category: TabStrip
Type: Feature Request
30

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.

Duplicated
Last Updated: 28 Nov 2024 15:58 by ADMIN
Currently the TabStrip solution for dynamic tabs is very inefficient, any change to the collection of Tabs (add/remove) would trigger the render of all tabs, even the ones that were already loaded, in scenarios where the Tab content contains complex components with nested components at different levels this is a pain, not only to load components but to load necessary information related to the component. It would be a breeze if we could reuse a component instance instead of creating a new one or only re-render (maybe with ShouldRender) the new added Tab.
Completed
Last Updated: 14 Nov 2024 09:29 by ADMIN
Release 7.0.0
Created by: LEE
Comments: 0
Category: TabStrip
Type: Bug Report
1

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:

Unhandled exception rendering component: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')
System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')

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

 

Duplicated
Last Updated: 07 Nov 2024 15:36 by ADMIN
Created by: John
Comments: 1
Category: TabStrip
Type: Feature Request
10

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

Duplicated
Last Updated: 07 Aug 2024 13:32 by ADMIN
Created by: Igor
Comments: 1
Category: TabStrip
Type: Feature Request
1

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.

Unplanned
Last Updated: 22 Jul 2024 12:33 by Lee

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.

Duplicated
Last Updated: 19 Mar 2024 10:59 by Fabien

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

Completed
Last Updated: 31 Oct 2023 12:14 by ADMIN
Release 5.0.0 (15 Nov 2023) (R1 PI1)
The issue can be reproduced in a TabStrip with Scrollable = true. The problem is easily observed if you programmatically change the ActiveTabIndex during runtime and activate a tab that is currently not in the visible part.

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


Completed
Last Updated: 21 Mar 2023 14:21 by ADMIN
Release 4.2.0 (26/04/2023)

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

Unplanned
Last Updated: 16 Mar 2023 14:21 by ADMIN
Created by: Besir
Comments: 2
Category: TabStrip
Type: Feature Request
7

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

                   
Unplanned
Last Updated: 30 Jan 2023 13:54 by George
Created by: George
Comments: 1
Category: TabStrip
Type: Feature Request
11

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.

 

Completed
Last Updated: 24 Nov 2022 11:36 by ADMIN

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>

Completed
Last Updated: 12 Oct 2022 07:26 by ADMIN
Release 3.7.0 (09 Nov 2022)
Created by: Nate
Comments: 0
Category: TabStrip
Type: Feature Request
1
I'm trying to add a context menu to a tab. When an item in the context menu is clicked, the content of the tab gets altered. However, the tab is not being rerendered. Even adding a call to StateHasChanged() is not causing a rerender. Only going away from the tab and coming back seems to cause a rerender.
Completed
Last Updated: 12 Oct 2022 07:26 by ADMIN
Release 3.7.0 (09 Nov 2022)

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.

Completed
Last Updated: 08 Sep 2022 10:03 by ADMIN
Release 3.6.0 (14 Sep 2022) (R3 2022)

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>

Declined
Last Updated: 31 Aug 2022 07:41 by ADMIN

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>

Completed
Last Updated: 25 Jul 2022 14:10 by ADMIN
Release 2.30.0
Created by: Roy
Comments: 10
Category: TabStrip
Type: Feature Request
54

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.

Completed
Last Updated: 16 Jul 2022 08:47 by ADMIN
Release 2.21.0
Created by: nonick
Comments: 3
Category: TabStrip
Type: Feature Request
38
I would like there to be a template for tab strip label so that i could put anything i want in there rather than just text.
Unplanned
Last Updated: 31 May 2022 12:46 by ADMIN
Created by: Beena
Comments: 1
Category: TabStrip
Type: Feature Request
9

Currently, I am running to a scenario where I would like to keep the tab content for only some of the tabs instead of all tabs in the TelerikTabStrip. It would be really helpful is there is a PersistTabContent for individual tabs.

Scenario - one of my tabs has upload component where I am uploading files. The user selects the file and then decides to move to the other tab instead of completing the upload process. On activetabindexchanged event, I have confirmation button that checks to see if the user wants to move to the other tab or not. If they confirm, then the active tab changes, if they cancel then the active tab remains at the current tab, though it loses all selected file. To resolve this situation, I am using PersistTabContent = true on TabStrip, which then retains tab content for all tabs, rather than just upload component tab. Having PersistTabContent for individual tab in this case will resolve the issue.

Thank you.

Beena.

1 2