RadzenTabs change active tab via code

Radzen Studio Blazor Server
1

I am using Blazor WebAssembly, and trying to figure out how to make Tabitem active using code ?
I want to onclick of button programmatically change active tab.
How can i do that ?

2

Did you try setting the SelectedIndex property of the Tabs component?

3

I have no idea how to do that., will appreciate an example.

<RadzenDataList @ref="MyRadzenTab" PageSize="6" WrapItems="true" AllowPaging="true" Data="@_myData" TItem="DataItem">
              
...
...
</RadzenDataList>

    private ElementReference MyRadzenTab;

I don't see any property by SelectedIndex.

<input class="btn btn-warning" type="button" value="Show my Data" @onclick="@(() => changeTab("ShowMyDataTab"))"

 async Task changeTab(string TabName)
    {
        Console.WriteLine("Tab change Requested " + TabName);
        //MAke the Selected Tab as Active one
        return;
    }
4

Any updates on this ?

5

Are you looking for dedicated support? You can find the options here:

6

I know this topic is quite old but I found a solution and want to share it with you.

<RadzenTabs @bind-SelectedIndex="TabsSelectedIndex">
<Tabs>
...
</Tabs>
</RadzenTabs>

/***
* Variables
*/
private int TabsSelectedIndex { get; set; } = 0;

If you now change the TabsSelectedIndex in your code to a value for example to 1, and then do a base.StateHasChanged(); the tab will change.

Example:

    private void ChangeTab()
    {
        TabsSelectedIndex = 1;
        base.StateHasChanged();
    }
3 Likes
7

Hi,

DaNeubi's solutions almost works for me. But if the user selects a random tab, and then later I set the selected index programmatically, it leaves the current tab content in place, and appends the newly selected tab. It's activating the new tab, but doesn't clear out the previous tab content.

Is there a "SelectTab(3)" feature that I can call from code? I need to be able to let the user select a tab at random, but also let them hit a "next" button on any tab to advance to the next tab.

I am aware of the "Steps" component, but I prefer to use tabs for now.

Thanks,
Mike

8

Hi korchev - Do you have any additional insight on this request? Thanks Mike

9

The SelectedIndex property is the way to change the selected tab. If you have found a case which does not work you can provide some reproduction code for us to test.

10

If you run this code, and select second tab (using tab), but then hit button, you will see content from multiple tabs.

Thanks...

@page "/tab_tester"

<h3>Tab Tester</h3>

<RadzenTabs Change=@OnTabChange
            RenderMode="TabRenderMode.Client"
            @bind-SelectedIndex="TabsSelectedIndex">
    <Tabs>
        <RadzenTabsItem Text="Customer">
            <RadzenButton Click=@(()=>AdvanceToTab(1))>Tab 1</RadzenButton>
        </RadzenTabsItem>
        <RadzenTabsItem Text="Vendor">
            <RadzenButton Click=@(()=>AdvanceToTab(2))>Tab 2</RadzenButton>
        </RadzenTabsItem>
        <RadzenTabsItem Text="Item">
            <RadzenButton Click=@(()=>AdvanceToTab(0))>Tab 0</RadzenButton>
        </RadzenTabsItem>
    </Tabs>
</RadzenTabs>

@code {

private int TabsSelectedIndex { get; set; } = 0;



private void OnTabChange(int index)
{
    TabsSelectedIndex = index;

    Console.WriteLine($"Tab with index {index} was selected.");
}


private void AdvanceToTab(int newTab)
{
    Console.WriteLine($"Advance to {newTab} was clicked.");

    TabsSelectedIndex = newTab;

    StateHasChanged();

}

}

11

Seems to be related with TabRenderMode.Client. You can use TabRenderMode.Server as a workaround until we fix that.

12

OK ...

I'm using Blazor WebAssembly - do you know if that will work?

Thanks,
Mike

13

Should work properly without StateHasChanged(). TabRenderMode.Server will work in both WASM and server-side Blazor.

14

Yes, I confirm that works.

I had to adjust some other code - I'm calling child methods of components on the tabs - I had to check if the components are null, since in server render mode, they may not exist yet.

Thanks for your help.

I look forward to client render mode fix!

Mike

15

Yes, I also confirm StateHasChanged() is not needed.

Thank you for pointing that out.

Mike

16

This has been fixed in the latest release - 2.63.9- 2021-11-04

Thank you for fixing that. Much appreciated!

Radzen is the best!

Mike