How to navigate to another tab from Component

Radzen IDE (Blazor WebAssembly)
#1

Hi there i am looking for help on how i can click on a button in a component in StatementToJE Tab and go to the tab JE Entry

Basically looking on clicking a button in a component in tab1 and move to Tab 2 -

<div class="container-fluid">
        <RadzenTabs RenderMode="TabRenderMode.Client" @bind-SelectedIndex="@selectedIndex"  Change="@OnChange">
            <Tabs>
                <RadzenTabsItem Text="Select Statement">
                    <StatementToJE></StatementToJE>
                </RadzenTabsItem>
                
                <RadzenTabsItem Text="JE Entry">
                  <JEntryWorkFlow></JEntryWorkFlow>
                </RadzenTabsItem>
            </Tabs>

        </RadzenTabs>
</div>
#2

Hi @rsb-abby,

You need to somehow update the selectedIndex field from the inner component. Since inner components don't have access to their parents by default you can do it one of the following ways:

  1. Inject a service in both the parent and child components.
  2. Provide the parent component as a cascading parameter to the child.
#3

thank-you for your reply. I managed to do it using parent - child component as suggested.
Passing the value as a parameter and using it as the index. - Chat GPT also gave some suggestions

//** Child*********

<button class="btn btn-primary" @onclick="@SendValueToParent">

in the child

    private async Task SendValueToParent()
    {
        await ValueChanged.InvokeAsync("1");
    }

//**Parent *****

<RadzenTabsItem Text="Select Statement">
            <StatementToJE ValueChanged="@ValueChangedHandler"></StatementToJE>
        </RadzenTabsItem>

private void ValueChangedHandler(string value) {
var tab = int.Parse(value);
OnChange(tab);
}