how to select specific tab with query string

[Aleqsandre]

if possible could you tell me please, how to select specific tab  with query string,

with below code, when select parameter equals Roles in query string, i want Roles tab to be selected when all tabs get loaded

@page "/PersonalTabs/{Select}"

<div>

    <EjsTab>

        <TabItems>

            <TabItem>

                <ChildContent>

                    <TabHeader Text="Messages"></TabHeader>

                </ChildContent>

                <ContentTemplate>

                    <Messages></Messages>

                </ContentTemplate>

            </TabItem>

            <TabItem>

                <ChildContent>

                    <TabHeader Text="Security"></TabHeader>

                </ChildContent>

                <ContentTemplate>

                    <EjsTab @ref="_EjsTab" OverflowMode="@Mode">

                        <TabEvents @onloadstart="OnLoad"></TabEvents>

                        <TabItems>

                            <TabItem>

                                <ChildContent>

                                    <TabHeader Text="Users"></TabHeader>

                                </ChildContent>

                                <ContentTemplate>

                                    <Users></Users>

                                </ContentTemplate>

                            </TabItem>

                            <TabItem>

                                <ChildContent>

                                    <TabHeader Text="Roles"></TabHeader>

                                </ChildContent>

                                <ContentTemplate>

                                    <Roles></Roles>

                                </ContentTemplate>

                            </TabItem>

                            <TabItem>

                                <ChildContent>

                                    <TabHeader Text="Rigts"></TabHeader>

                                </ChildContent>

                                <ContentTemplate>

                                    <Rights></Rights>

                                </ContentTemplate>

                            </TabItem>

                        </TabItems>

                    </EjsTab>

                </ContentTemplate>

            </TabItem>

        </TabItems>

    </EjsTab>

</div>

@code{

    EjsTab _EjsTab;

    [Parameter] public string Select { get; set; }

    public OverflowMode Mode { get; set; } = OverflowMode.MultiRow;

    protected override void OnInitialized()

    {

    }

    void OnLoad()

    {

        if (_EjsTab != null)

        {

            if (Select == "User")

            {

                _EjsTab.Select(0);

            }

            if (Select == "Role")

            {

                _EjsTab.Select(1);

            }

            if (Select == "Rigts")

            {

                _EjsTab.Select(2);

            }

        }

    }

}

[Alagumeena Kalaiselvan]

Hi Aleqsandre, 

Greetings from Syncfusion support! 

We have checked with your reported query “How to select specific tab with query string” and We suggest you to use “SelectedIndex” property to select specific tab instead of using Tab events and Select public method. We have modified your shared sample for your reference. 

<div> 

    <EjsTab> 

        <TabItems> 

            <TabItem> 

                <ChildContent> 

                    <TabHeader Text="Messages"></TabHeader> 

                </ChildContent> 

                <ContentTemplate> 

                    <Messages></Messages> 

                </ContentTemplate> 

            </TabItem> 

            <TabItem> 

                <ChildContent> 

                    <TabHeader Text="Security"></TabHeader> 

                </ChildContent> 

                <ContentTemplate> 

                    <EjsTab @ref="_EjsTab" OverflowMode="@Mode" SelectedItem=@SelectedIndex> 

                        <TabItems> 

                            <TabItem> 

                                <ChildContent> 

                                    <TabHeader Text="Users"></TabHeader> 

                                </ChildContent> 

                                <ContentTemplate> 

                                    <Users></Users> 

                                </ContentTemplate> 

                            </TabItem> 

                            <TabItem> 

                                <ChildContent> 

                                    <TabHeader Text="Roles"></TabHeader> 

                                </ChildContent> 

                                <ContentTemplate> 

                                    <Roles></Roles> 

                                </ContentTemplate> 

                            </TabItem> 

                            <TabItem> 

                                <ChildContent> 

                                    <TabHeader Text="Rigts"></TabHeader> 

                                </ChildContent> 

                                <ContentTemplate> 

                                    <Rights></Rights> 

                                </ContentTemplate> 

                            </TabItem> 

                        </TabItems> 

                    </EjsTab> 

                </ContentTemplate> 

            </TabItem> 

        </TabItems> 

    </EjsTab> 

</div> 

@code{ 

    EjsTab _EjsTab; 

    [Parameter] 

    public string Select { get; set; } 

    public double SelectedIndex { get; set; } 

    public OverflowMode Mode { get; set; } = OverflowMode.MultiRow; 

 

    protected override void OnInitialized() 

    { 

        if (Select == "User") 

        { 

            SelectedIndex = 0;  // To select first Tab 

        } 

        if (Select == "Role") 

        { 

            SelectedIndex = 1;  // To select second Tab 

        } 

        if (Select == "Rigts") 

        { 

            SelectedIndex = 2;  // To select third Tab 

        } 

    } 

} 

Kindly try out with shared solution and get back to us, If you need further assistance. 

Regards 

Alagumeena.K 

[Aleqsandre]

OnInitialized only happens once and when query string changes tabs don't get selected. Is there a different solution?

[Alagumeena Kalaiselvan]

Hi Aleqsandre, 

Thanks for your update! 

You can use OnParametersSet method to achieve your case and this method invoked whenever the component has received the parameters from it’s parent. We modified the already shared sample for your reference. 

@page "/PersonalTabs/{Select}" 

 

<div> 

    <EjsTab> 

        <TabItems> 

            ... 

       </TabItems> 

    </EjsTab> 

</div> 

@code{ 

    ... 

    protected override void OnParametersSet() 

    { 

        if (Select == "User") 

        { 

            SelectedIndex = 0;  // To select first Tab 

        } 

        if (Select == "Role") 

        { 

            SelectedIndex = 1;  // To select second Tab 

        } 

        if (Select == "Rigts") 

        { 

            SelectedIndex = 2;  // To select third Tab 

        } 

    } 

} 

Please let us know, If you need further assistance. 

Regards 

Alagumeena.K