Help with dynamic tabs

Radzen.Blazor Components
1

The problem I have is the following, I have 5 dynamic tabs, these tabs have a texbox, when I close for example, number 4, the content of number 5 is rendered again but the previous ones are not, if I have something typed in a texbox of number 5 when I go back to loading is lost.
sorry for my English. thank you.

image
image870×365 3.43 KB

image
image770×401 8.25 KB

Note: I'm using RenderMode="TabRenderMode.Client"

2

Hi @Mauricio_Arias,

You may need to execute the Reload method of the RadzenTabs component after removing a tab. Get a @ref to it:

<RadzenTabs @ref=@tabs ...>
</RadzenTabs>

@code {
   RadzenTabs tabs;

   void OnRemoveTab()
   {
       // remove the tab

       tabs.Reload();
   }
}
3

It didn't work for me, but I'll see if I can explain it better.
In this example I have 4 tabs with one input each,
in each impu place the name of text and the number of the tab,

image
image731×403 28.6 KB

If I eliminate one, for example, from 2, the value of 4 is lost and in 3 the value of 2 remains and in 4 the heat of 3 remains.
image
It is like the values move, this happens whenever the tab has the same content, if it is different, it will only be lost.

Thanks for the help

Code

<RadzenTabs @ref="tabs" RenderMode="TabRenderMode.Client" @bind-SelectedIndex=@selectedIndex>
    <Tabs>
        @foreach (var item in items)
        {
            <RadzenTabsItem Text="@(item)">
                @item
                <RadzenTextBox></RadzenTextBox>
            </RadzenTabsItem>
        }
    </Tabs>
</RadzenTabs>

<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.Center" Gap="0.5rem" Class="rz-pt-4 rz-pb-8">
    <RadzenButton Click="AddItem">Add Item</RadzenButton>
    <RadzenButton Click="RemoveItem">Remove Item</RadzenButton>
</RadzenStack>


@code {
    RadzenTabs tabs;
    int selectedIndex = 0;

    List<string> items = new List<string> { "Customers", "Orders", "Order Details" };
    int i = 0;

    void AddItem()
    {
        items.Add($"TabItem{++i}");
        tabs.Reload();
    }

    void RemoveItem()
    {
        items.RemoveAt(selectedIndex);
        if (selectedIndex >= items.Count) selectedIndex = items.Count - 1;
        tabs.Reload();
    }
}
4

I am afraid I don't understand the exact steps. You can however try setting the @key attribute of every tab.

 <RadzenTabsItem @key=@item Text="@(item)">