Dynamically removing tabs

Radzen Blazor Studio
1

I have a main Edit Form that has several tabs on it in the razor page (RadzenTabsItem).

When the form loads, I'd like to have logic to dynamically remove some of these tabs.

I've tried to go the reverse, adding each tab as a DynamicComponent, but that way seems much more complex as I'd need to pass parameter changes between the parent form and child tabs.

I've added variables in my code behind representing the RadzenTabs and RadzenTabsItems and linked them to the Razor code via "@ref=".

RadzenTabs mytabs;
RadzenTabsItem tab1;

In my OnInitializedAsync() method, I try to remove tabs:

mytabs.RemoveItem(tab1)

But at this point, "mytabs" is null.

Could someone help me understand the ideal method to override in which to remove tabs?

2

You shouldn't use the RemoveItem method from your code - it is used only for cleanup purposes. Use the Visible property of RadzenTabsItem instead.

3

Thanks, I'm using the "Visible" property on the RadzenTabsItems, but they still appear in the list of items for the RadzenTabs control.

This ends up being an issue for me as I have RequiredValidators on tabs that are not Visible, which then prevents FormSubmit.

Since I don't need anything on the non-visible tabs, it seems like the cleanest approach would be to remove them from the form instance completely.

I saw this past post that uses "RemoveAt" with the Tabs bound to a List:

https://forum.radzen.com/t/dynamic-tabs-with-showing-razor-pages-in-each-tab/8506/2?u=db1234

Could you help me understand why using RemoveItem isn't recommended?

Is there another approach I could use to remove the tabs on a dynamic basis when the form loads?

I've tried overriding OnAfterRenderAsync but my reference to the Tabs control is still null at that point.

4

This shouldn't happen. I tried to reproduce it but I couldn't. I wonder why it doesn't work for you. Can you paste some code which doesn't work?

The solution I have mentioned in that thread uses a separate collection and constructs the tab via foreach statement. Check the code from that thread.

Because it is only used for cleanup and will not remove the tab visually. Again my solution from the linked thread is not using RemoveItem. It uses RemoveAt of the collection from which the tabs are declared.

Finally you can probably use if statements:

<Tabs>
    @if (condition1)
    {
       <RadzenTabsItem ...>
    }
    @if (condition2)
    {
       <RadzenTabsItem ...>
    }
1 Like
5

Thanks for the idea to use if statements.

I've wrapped all my TabItems in if statements, using the booleans I was already using for the Visible property and it seems to be only loading the desired tabs.

You may recall a previous post where I saw the tabs control incorrectly highlighting the wrong tab / tabs that were not selected. I wonder if it's related to the many tabs I had loading, and/or that about 6 of the tabs had identical Text values.

Through troubleshooting I realized I wasn't calling the base when overriding in methods, I'm not sure if that's related to this issue as well.

6

I don't know as I never reproduced such a problem.

This could definitely cause problems if there is important code in the base implementations.