how to select specific tab with query string
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);
}
}
}
}
SIGN IN To post a reply.
3 Replies
AK
Alagumeena Kalaiselvan
Syncfusion Team
March 19, 2020 09:54 AM UTC
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
AL
Aleqsandre
March 19, 2020 01:01 PM UTC
OnInitialized only happens once and when query string changes tabs don't get selected. Is there a different solution?
AK
Alagumeena Kalaiselvan
Syncfusion Team
March 20, 2020 12:02 PM UTC
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
SIGN IN To post a reply.
- 3 Replies
- 2 Participants
-
AL Aleqsandre
- Mar 18, 2020 04:23 PM UTC
- Mar 20, 2020 12:02 PM UTC
