Last Updated: 15 Jan 2020 10:01 by ADMIN
Created on: 30 Sep 2019 07:22
Category: TabStrip
Type: Feature Request
Tabs can hide with CSS only to avoid re-initializing

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.

Marin Bratanov
Posted on: 15 Jan 2020 10:01

Hi Collin,

I agree with you that "plain" CSS hiding can have its uses, and I can encourage you to Follow this item to get status notifications on when it gets implemented.

For the time being, the purely Blazor way would be to implement state management for the components that you put in the tabs and place that state manager above the tab strip, so the actual data collections and parameters are stored there - then re-rendering a tab would re-use them. I realize that's a bit of coding and it will still have downsides (such as maintaining scroll positions, and the grid state), which is why this item is marked as "approved", meaning something we intend to implement.

Marin Bratanov
Progress Telerik

 UI for Blazor
Posted on: 14 Jan 2020 23:01
This is important as sometimes I use tabs to organize data, like the first tab is a search grid, the second tab has details of the parent object, and then subsequent tabs have grids of related child objects.  Users will often flip back and forth between tabs and I don't want to rerender each tab when they do.  I'll experiment with CSS hiding and passing in data, but it would be great if there was an option to turn this firing Initialize of a child component when a tab is selected.
Posted on: 14 Jan 2020 22:52
I second the need for the tabs to not re-render if you tab back to / reselect them if some property is set.