TabStrip, persisting content and OnInitialized

1 Answer 42 Views
TabStrip
Rami
Top achievements
Rank 1
Veteran
Rami asked on 14 Mar 2022, 10:29 AM

Hello,

I ran into a small quirk when using the Blazor TabStrip component. If I have a list of models for the tabs to be initialized from and I don't set PersistTabContent to be true, only the first tab will call a components OnInitializedAsync method. If I do set PersistTabContent to true then the components get their OnInitializedAsync called, but only once as is to be expected. On the other hand, if I have "hardcoded" the TabStripTabs, then the OnInitializedAsync is called. Is this a bug or am I doing something weirdly?

 

A small demo can be seen at https://blazorrepl.telerik.com/cmadPIvY25vWwvTi23 where if you open the browser devtools and goto the console tab, you can see that when you change the active tab on the upper Strip, OnInitializedAsync is not called if PersistTabContent is false.

 

Regards, Rami

1 Answer, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 15 Mar 2022, 05:11 AM

Hi Rami,

I don't see a difference in the behavior of both tab strips, and in the default case, each tab will initialize only when activated.

What perhaps is important to note is that you may want to use the @key directive to properly instruct the framework when to initialize the child component. Take a look here for more details and examples: https://docs.telerik.com/blazor-ui/components/tabstrip/tabs-collection

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

Rami
Top achievements
Rank 1
Veteran
commented on 16 Mar 2022, 05:45 AM

Thank you Marin! The @key was what was missing, I apparently didn't read the docs properly. Now the OnInitialized is called for all tabs on both strips.

So for anyone stumbling into the same thing, adding the @key to the below snippet fixes this issue like Marins link says.

<TabStripTab Title="@t.ToString()">
   <SpecialComponent ID="@t" @key="@t"/>
</TabStripTab>

Tags
TabStrip
Asked by
Rami
Top achievements
Rank 1
Veteran
Answers by
Marin Bratanov
Telerik team
Share this question
or