Select RadzenTab from code

Radzen.Blazor Components
1

Hi,

is there meanwhile a possibility to select a certain tab from a method?

RadzenTabs tabs;
tabs.SelectedIndex = 1;

This should not work. Another attribute I didn't found yet.

Thanks and regards
Arne

2

You need to use the SelectedIndex property.

<RadzenTabs SelectedIndex=@selectedIndex />

@code {
    int selectedIndex; 

    void SelectFirstTab()
    {
       selectedIndex = 0;
    }
}
3

Hello korchev,

ah OK that's easy - thank's very much

Best regards
Arne

4

Dear @korchev,

This method does not work in the latest version. Something may have broken.
It looks like it only works once. And then it stops responding to changes in the index.

Thank you!

5

Hi @Agefer,

You need to use @bind-SelectedIndex if you want to keep the state in sync with the property. Here is a minimal working example:

<RadzenButton Click=@(() => selectedIndex = 1) Text="Select second tab" />
<RadzenTabs @bind-SelectedIndex=@selectedIndex>
   <Tabs>
      <RadzenTabsItem Text="Orders">
         Orders
      </RadzenTabsItem>
      <RadzenTabsItem Text="Employee">
         Employee
      </RadzenTabsItem>
      <RadzenTabsItem Text="Customers">
         Customers
      </RadzenTabsItem>
   </Tabs>
</RadzenTabs>
@code {
 int selectedIndex = 0;
}
2 Likes
6

Dear @korchev thank you!