Select method to navigate when index tab is not consistent

[Adriana Selena Tito Ilasaca]

Hi! 

working with the tab component I want to navigate to a specific tab when the component is created, but my items tabs are hidden or shown depending on certain information, for example, I have tab items: Tab1, Tab2, Tab3, Tab4, Tab5. but when the component renders sometimes Tab3 and Tabd4 are hidden, so the index changes from 0 to 2 if all my tabs are shown the index changes 0 to 4. but for example, I want to navigate to Tab5 automatically I do not know the current index of Tab5 since my tabs change.

Is there any method to navigate using the tab header text maybe? Also, I notice that _refTab.Items.Count() does not help.

I will appreciate your answer.

[Satheesh Kumar Balasubramanian]

Hi Adriana, 

  

Thanks for using Syncfusion Products. 

  

We have validated your reported query "Select method to navigate when index tab is not consistent" and achieved your requirement by using two way binding of SelectedItem in Created event of tab. For the same we have prepared a sample which can be downloaded from the following link. 

Sample: https://www.syncfusion.com/downloads/support/forum/169436/ze/CurrentTabHeaderText1549911791 

UG: https://blazor.syncfusion.com/documentation/tabs/getting-started#two-way-binding-of-selecteditem 

  

Index.razor:  

<SfTab @ref="Tab" @bind-SelectedItem="SelectedTab"> 

    <TabEvents Created="OnCreated"></TabEvents> 

</SfTab> 

  

@code { 

    SfTab Tab; 

    int SelectedTab = 0; 

    public bool ShowTab { get; set; } = true; 

    public string SelectText { get; set; } 

    void OnCreated() 

    { 

        SelectText = "Los Angeles"; 

        if (Tab.Items.Count > 0) 

        { 

            int index = Tab.Items.FindIndex(x => x.Header.Text.StartsWith(SelectText)); 

            SelectedTab = index; 

        } 

    } 

} 

  

Kindly try the above sample and let us know if this meets your requirement. 

  

Regards, 

Satheesh Kumar B