Change tabs in RadzenTabs only after validation

Radzen.Blazor Components
1

Hi,
I would like to make some sort of validations before allow user to change current tab with the selected new one.

I have defined my tabs as follow:

<RadzenTabs TabPosition="TabPosition.Top" RenderMode="TabRenderMode.Server" Change="@(async args => { await OnTabChange(args); })" SelectedIndex="selectedIndex">
    <Tabs>
        <RadzenTabsItem Text="MainDataTab">
        </RadzenTabsItem>
        <RadzenTabsItem Text="SecondaryTab">
        </RadzenTabsItem>
    </Tabs>
</RadzenTabs>

and in the code behind I have the following method:

private async Task OnTabChange(int index)
        {
                var confirmResult = await DialogService.Confirm("Sure?", "Warning", new ConfirmOptions() { OkButtonText = "Yes", CancelButtonText = "No" });
                if (confirmResult.HasValue && confirmResult.Value)
                {
                    selectedIndex = index;
                }
                DialogService.Close(true);
                DialogService.Dispose();
        }

But the control renders the new tab before I make my dialog popup choice.
How I have to do?

Thank you very much

2

Hi @davide.n,

RadzenTabs fires the Change event after changing the tab. There isn't a way to prevent tab changing from happening.

As a workaround I can suggest using RadzenSteps which supports validation components - if you place it inside RadzenTemplateForm the user will not be able to change steps until the current step is valid. Using validation is also not mandatory - our steps demo shows how one can disable steps conditionally.

3

Thank you.
But you'll add this feature to RadzenTabs?

4

Hey @davide.n,

Radzen.Blazor is open source library, we accept pull requests!

5

I used the steps component and changed the style to mimic tabs