TabsItem with lazy-loaded content

Radzen.Blazor Components
1

Hi

I'm using the Blazor Tabs component, where each tab contains a custom component, some of which are quite expensive to load.

I wish the state of the custom components to be retained when flicking between tabs, so I have used "client" mode. However, I would also like to load the required tab data in a lazy mode, so that the data is loaded only when the given tab is first selected.

I think what I need is to pass a parameter down to the custom component e.g. IsSelected, and postpone loading the data until this parameter is set to true. However I have tried something along these lines, and the custom component is not being informed when the parameter changes

<RadzenTabs RenderMode="TabRenderMode.Client" @ref="myTabs"
            @bind-SelectedIndex=@selectedIndex>
            <Tabs>
                <RadzenTabsItem Text="Tab1">
                    <MyCustomComponent IsSelected=@(selectedIndex==0)>
                </RadzenTabsItem>
                <RadzenTabsItem Text="Tab2">
                    <MyCustomComponent IsSelected=@(selectedIndex==1)>
                </RadzenTabsItem>
             </Tabs>
        </RadzenTabs>

I'm a bit of a Blazor newbie, so any help appreciated.

Many thanks

2

The two-way binding to SelectedIndex will work as expected - you can verify it using a property with setter instead field:

image
image1920×1080 269 KB

however nothing will execute the IsSelected code since this change is performed using plain JavaScript completely client side.

It's better to use server RenderMode instead if you want on-demand rendering.

3

Thanks for the response. Yes I am able to see/confirm that the two-way binding works as expected. The issue I have experienced with server RenderMode is that the components within the tab items are destroyed/re-created when flipping between tabs, yet for my use case all of the state (including positioning of DataGrid etc within the tab) needs to be preserved.

Is there a way of getting notified when a tab is (first) selected, together with retaining state within all of the tabs?

Many thanks

4

Preserving DataGrid settings can be achieved in different way:

5

There is also another option - to use Client for RenderMode and to call your custom component method (using @ref) on SelectedIndex change.

6

Thanks - that makes sense.

I have got it working by triggering StateHasChanged() asynchronously, i.e. after the tab selection event has completed. I'm not sure this would be considered robust or good practice, but it appears to have the desired effect of allowing lazy loading and retaining all state within the tabs.

int selectedIndex = 0;
public int SelectedIndex
{
    get
    {
        return selectedIndex;
    } 
    set 
    {
        selectedIndex = value;
        Task.Run(() => InvokeAsync(StateHasChanged));
    }
 }

Thanks for your help.