TabStrip with dynamic tabs re-render all tabs when new tab is added/removed

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Duplicated

Last Updated: 28 Nov 2024 15:58 by ADMIN

Ricardo

Created on: 24 Feb 2023 20:47

Category: TabStrip

Type: Feature Request

TabStrip with dynamic tabs re-render all tabs when new tab is added/removed

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.

Duplicated

This item is a duplicate of an already existing item. You can find the original item here:

Support for dynamic tabs

6 comments

ADMIN

Dimo

Posted on: 28 Nov 2024 15:58

Hi John,

We will plan our major tasks for 2025 in the following weeks. I am not sure if this feature fits in that category, but it is in our short list anyway. I can recommend following the status, which is the official source of truth and we usually can't confirm anything more specific.

On a side note, I noticed that there are duplicated feature requests about dynamic tab support, so I linked them.

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

John

Posted on: 22 Nov 2024 15:59

@Tsvetomir has there been any progress here? it's been about a year and a half since this was first reported. My product really needs this update.

ADMIN

Tsvetomir

Posted on: 18 Jul 2023 07:10

Hello,

Thank you for sharing your point of view regarding the dynamic tabs functionality. Indeed, it seems that a combination of adding a tab and changing the active index causes the component to rerender its internal collection.

Regards,
Tsvetomir
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!

Franc Vajda

Posted on: 13 Jul 2023 13:27

I am also experiencing a similar problem with the TabStrip component when using dynamic tabs. In my case, the tab content gets re-rendered and re-initialized, causing the data to reload. I have a razor component inside each tab. My TabStrip is configured with PersistTabContent property set to true and keys assigned to the tabs.

In addition to the previous discussions in the support ticket, I am sharing further example that demonstrates the issue in my use case. There is also a different issue with UI tab focus - when adding tabs to the beginning of the collection.

Attached Files:

dynamictabs-bug-myusecase.zip

ADMIN

Tsvetomir

Posted on: 15 Jun 2023 14:10

Hi,

I am marking the item as a valid feature request in which we could leverage better performance in the tab strip rerendering when the tabs collection is changed. Also, scenarios that change the active tab index dynamically after adding should be handled. Here is a REPL example.

Regards,
Tsvetomir
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.

ADMIN

Tsvetomir

Posted on: 03 Mar 2023 10:58

Hi Ricardo,

Thank you for your feedback. Indeed, the component is rerendered each time a new item is added or removed. This is due to the fact that the collection of the components starts to point to a new collection reference, due to the LINQ statements. Such behavior is actually expected due to how the diffing algorithm of Blazor works.

I will review the example and evaluate the possible performance optimizations. Whenever I have any findings or suggestions, I will keep you posted.

Regards,
Tsvetomir
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.