Completed
Last Updated: 30 Nov 2021 08:41 by ADMIN
Release 2.30.0
Roy
Created on: 30 Sep 2019 07:22
Category: TabStrip
Type: Feature Request
52
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.

8 comments
Chun
Posted on: 29 Sep 2021 19:39
i need this feature too. I have an app switching between maintenance pages.
ADMIN
Marin Bratanov
Posted on: 19 May 2021 06:19

Hello Adrian,

The best way to know when this will get implemented is to click the Follow button. Once we know the release it will be in, the page will be updated with that information, and you will get an email about it.

Regards,
Marin Bratanov
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Adrian
Posted on: 18 May 2021 22:32
Is there a future release version planned that we might see this approved feature land?
ADMIN
Marin Bratanov
Posted on: 08 May 2021 06:52

Hi Sergey,

In a Blazor app the general approach to solve this would be to create an application or page state one level (or more) above the tab strip so you can cache and keep settings, parameter values and data there - this will let you pass them down to components in the tabs so they don't have to fetch them every time.

This would be the approach to use until such a feature becomes available, and once you have it implemented, it can have other uses besides a tab strip (it can, for example, be extracted on a higher level or as a service and serve for pages in the app, not just for a few components in tabstrips).

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Sergey
Posted on: 07 May 2021 21:06

For projects with complex components, when loading/unloading takes significant time, this feature is essential. Currently it takes a few seconds to switch between tabs.

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

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Collin
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.
Collin
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.