Tabs - Content Reinitializing on Tab Change

Radzen Studio Blazor Server
21

What’s your render mode? Can you provide example where client render is slower?

22

This is client render before the change:
OldTabRenderClient

To be honest I didn't see any difference, but either way the rendering takes many seconds in each tab change, which makes client render pointless. At first it was taking too long to render tabs with server render (as the last tab in my server render gif), and after trying the suggested client render it just got worse.

I thought that server render meant that every tab would render per demand, so each time you select it, its contents would be requested and downloaded from the server. Whereas in client render all tabs would be downloaded on page render, hence the slower initial render, and later only their visibility property would be changed when a new tab is selected.

23

Without more info/code I will unable to provide more info. In short:

You can debug the source code to check the actual behavior and what is rendered.

1 Like
24

Hello.
There is such a code.

<RadzenTabs @ref="@tabs" RenderMode="TabRenderMode.Server" >
    <Tabs>
        @foreach(var record in records)
        {
            <RadzenTabsItem Text="@record.Date.ToShortDateString()">
              <SPersonSelectItem RecordId="@record.Id" EvDate="@record.Date"/>
            </RadzenTabsItem>
        }
    </Tabs>
</RadzenTabs>

When you open the page, 4 tabs are formed.
With RenderMode="TabRenderMode.Client", everything works as you described. Initialization and parameter setting events are called 4 times - 4 different child objects are created in memory. When switching to another page, the Dispos event is called 4 times.

But with RenderMode="TabRenderMode.Server", the behavior is different from that described.
The initialization event on the child is called only once when the page is opened.
Switching tabs does not remove the child from memory — the Dispose event is not raised. Also, no initialization event is raised on the child object. The child object is not recreated. Only the parameter setting event (OnParametersSet) is fired. It turns out that the same child object is displayed in all tabs. If, for example, in the child object on the first tab, after pressing the button, the value of the variable "count" is set equal to 2

int count=0;
void ButtonClick()
{count+=2;}

, then on the all tabs "count" will be equal to 2.
The Dispose event on the child is only raised when another page is opened.
I assumed that in the "server" variant, when switching to another tab, the old child object is destroyed and a new one is created. Please tell me how is it right?

25

You can try setting the @key attribute of every tab so it isn't reused.

    <Tabs>
        @foreach(var record in records)
        {
            <RadzenTabsItem @key="@record.Date.ToShortDateString()" Text="@record.Date.ToShortDateString()">
              <SPersonSelectItem RecordId="@record.Id" EvDate="@record.Date"/>
            </RadzenTabsItem>
        }
    </Tabs>

However keep in mind that we do not have any control over when and how Blazor invokes the Dispose method of a component.

I am locking this thread as I believe we have explained both rendering modes (and the source code is available for further research).

26