Duplicated
Last Updated: 18 Mar 2024 15:53 by ADMIN

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.


Unplanned
Last Updated: 25 Jul 2023 07:07 by Michael
Created by: Michael
Comments: 0
Category: TabStrip
Type: Bug Report
3

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.

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
6

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
3

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

Completed
Last Updated: 31 May 2022 07:49 by ADMIN
Release 3.4.0
When setting the Blazor Tab control to Scrollable="true" the arrow buttons are set to be submit buttons.  This has a major problem in submitting a form they are embedded in, and there is no need for them to be submit button.  When manually edited to change them to not be submit buttons they operate as expected.
Duplicated
Last Updated: 11 May 2022 19:04 by ADMIN

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="Tab 0 Always Visible">

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

..

IsTabVisible = true;

ActiveTabIndex = 1;

 

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

Completed
Last Updated: 09 May 2022 06:17 by ADMIN
Release 3.3.0
Created by: Uluç
Comments: 1
Category: TabStrip
Type: Feature Request
29

At the moment, if I have many tabs, their titles go off the screen (or the container of the tab strip). I want that they don't stretch my layout, or they don't become invisible.

---

ADMIN EDIT

For the time being, there are two workarounds you can consider:

  • adding a scrollbar to the tabs list:
    <style>
        /* sample settings for the parent of the tab strip to showcase how the rules below work */
        .tab-container {
            border: 1px solid red;
            width: 30%;
        }
        
        /* tab titles will now produce a scrollbar when too wide */
        .tab-container .k-tabstrip .k-tabstrip-items {
            flex-flow: inherit;
            max-width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
        }
    
        /* just to showcase what happens when the content is wide - a separate scrollbar */
        .wide-content {
            background: yellow;
            width: 1200px;
        }
    </style>
    
    <div class="tab-container">
        <TelerikTabStrip>
            @foreach (var item in Enumerable.Range(1, 10))
            {
                <TabStripTab Title="@( $"Item {item}" )"><div class="wide-content">Content for item @item</div></TabStripTab>
            }
        </TelerikTabStrip>
    </div>

  • making the tabs drop into multiple rows:
    <style>
        /* sample settings for the parent of the tab strip to showcase how the rules below work */
        .tab-container {
            border: 1px solid red;
            width: 30%;
        }
    
            /* tabs will wrap on more than one row if there are too many to fit */
            .tab-container .k-tabstrip .k-tabstrip-items {
                flex-wrap:wrap;
            }
    </style>
    
    <div class="tab-container">
        <TelerikTabStrip>
            @foreach (var item in Enumerable.Range(1, 10))
            {
                <TabStripTab Title="@( $"Item {item}" )"><div class="wide-content">Content for item @item</div></TabStripTab>
            }
        </TelerikTabStrip>
    </div>

---

Completed
Last Updated: 03 May 2022 09:01 by ADMIN
Release 3.3.0
Created by: David
Comments: 0
Category: TabStrip
Type: Feature Request
6

I have four tabs in my tab strip, and the content in each tab is of varying width. The tab item resizes to the width of the content as it changes. I want to be able to set a fixed width for all the tabs so they don't expand and contract all the time.

 

===========

ADMIN EDIT

===========

In the meantime, you can control the width of the TabStrip with some custom CSS. You can use its Class parameter to set a custom CSS class to the main wrapping container of the component and then apply the desired styles. Thus, you will be styling only this specific instance of the TabStrip and not all instances on the page/app (in case needed, you can of course add the same CSS class to all instances to have the same styles).

The sample below demonstrates the described approach. First instance of the TabStrip has the default setup, no additional styles added. Second instance has fixed width.

<TelerikTabStrip>
    <TabStripTab Title="First">
        First tab content. Go to the third tab to see the problem.
    </TabStripTab>
    <TabStripTab Title="Second tab heading longer than others">
        Second tab content. Go to the third tab to see the problem.
    </TabStripTab>
    <TabStripTab Title="Third">
        <div style="width: 2000px;">lorem ipsum</div>Third tab content.
    </TabStripTab>
</TelerikTabStrip>

<style>
    .tab-with-width {
        width: 600px;
    }
</style>

<TelerikTabStrip Class="tab-with-width">
    <TabStripTab Title="First">
        First tab content. Go to the third tab to see the behavior when the TapSrtrip has fixed width.
    </TabStripTab>
    <TabStripTab Title="Second tab heading longer than others">
        Second tab content. Go to the third tab to see the behavior when the TapSrtrip has fixed width.
    </TabStripTab>
    <TabStripTab Title="Third">
        <div style="width: 2000px;">lorem ipsum</div>Third tab content.
    </TabStripTab>
</TelerikTabStrip>

Completed
Last Updated: 11 Apr 2022 11:31 by ADMIN
Release 3.3.0
Created by: Rod
Comments: 0
Category: TabStrip
Type: Bug Report
3
I have a tab strip with several tabs, one of which is invisible ('Tab 1'). When I select 'Tab 2' it becomes active, but the focus is set to the next tab, 'Tab 3'. This just seemed to start after upgrading to 3.1 version.

See attached screen shot.

Sample code:

 <TelerikTabStrip>
        <TabStripTab Title="Tab 0" Visible="true">
            content 0
        </TabStripTab>
        <TabStripTab Title="Tab 1" Visible="false">
            content 1
        </TabStripTab>
        <TabStripTab Title="Tab 2" Visible="true">
            content 2
        </TabStripTab>
        <TabStripTab Title="Tab 3" Visible="true">
            content 3
        </TabStripTab>
    </TelerikTabStrip>
Completed
Last Updated: 01 Feb 2022 14:40 by ADMIN
Release 3.1.0
Created by: George
Comments: 0
Category: TabStrip
Type: Bug Report
2
TabStrip does not persist content properly
1 2