Unplanned
Last Updated: 18 Jul 2023 07:10 by ADMIN
Ricardo
Created on: 24 Feb 2023 20:47
Category: UI for Blazor
Type: Feature Request
10
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.
4 comments
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.
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.