New to Telerik UI for Blazor? Download free 30-day trial

Events

The available events in the Telerik Wizard for Blazor are:

OnChange

The OnChange event is triggered on the current step and fires before the step has changed. The handler receives an object of type WizardStepChangeEventArgs which exposes the following fields:

  • TargetIndex - contains the index of the targeted new Wizard step.
  • IsCancelled - specifies whether the event is canceled and the built-in action is prevented.

Handle the OnChange event of the first and second steps. The result from the snippet below.

OnChange

@* Handle the OnChange event of the steps *@

Next targeted step index: @TargetIndex

<div style="text-align:center">
    <TelerikWizard Width="600px" Height="300px">
        <WizardSteps>
            <WizardStep OnChange="@OnChangeHandler1" Text="1">
                <Content>
                    <h2>Content for Wizard Step 1</h2>
                </Content>
            </WizardStep>
            <WizardStep OnChange="@OnChangeHandler2" Text="2">
                <Content>
                    <h2>Content for Wizard Step 2</h2>
                </Content>
            </WizardStep>
            <WizardStep Text="3">
                <Content>
                    <h2>Content for Wizard Step 3</h2>
                </Content>
            </WizardStep>
        </WizardSteps>
    </TelerikWizard>
</div>

@code{
    public int? TargetIndex { get; set; } = null;

    async Task OnChangeHandler1(WizardStepChangeEventArgs args)
    {
        TargetIndex = args.TargetIndex;
    }

    async Task OnChangeHandler2(WizardStepChangeEventArgs args)
    {
        args.IsCancelled = true;

        await Dialog.AlertAsync("Please complete step 2 first", "You cannot proceed");

    }

    [CascadingParameter]
    public DialogFactory Dialog { get; set; }
}

ValueChanged

The ValueChanged event fires after the OnChange event is triggered and the Step has been changed.

Handle the ValueChanged event of the Wizard. The result from the snippet below.

ValueChanged

@* Handle the ValueChanged event of the Wizard *@

@Logger

<div style="text-align:center">
    <TelerikWizard ValueChanged="@ValueChangedHandler" Width="600px" Height="300px">
        <WizardSteps>
            <WizardStep Text="1">
                <Content>
                    <h2>Content for Wizard Step 1</h2>
                </Content>
            </WizardStep>
            <WizardStep Text="2">
                <Content>
                    <h2>Content for Wizard Step 2</h2>
                </Content>
            </WizardStep>
            <WizardStep Text="3">
                <Content>
                    <h2>Content for Wizard Step 3</h2>
                </Content>
            </WizardStep>
        </WizardSteps>
    </TelerikWizard>
</div>

@code{

    public string Logger { get; set; }

    void ValueChangedHandler()
    {
        Logger = "ValueChanged fired. You can perform the desired logic here.";
    }

}

OnFinish

The OnFinish event fires when the Done button of the Wizard is clicked.

Handle the OnFinish event of the Wizard. The result from the snippet below.

OnFinish

@* Handle the OnFinish event of the Wizard *@

<div style="text-align:center">
    <TelerikWizard OnFinish="@OnFinishHandler" Width="600px" Height="300px">
        <WizardSteps>
            <WizardStep Text="1">
                <Content>
                    <h2>Content for Wizard Step 1</h2>
                </Content>
            </WizardStep>
            <WizardStep Text="2">
                <Content>
                    <h2>Content for Wizard Step 2</h2>
                </Content>
            </WizardStep>
            <WizardStep Text="3">
                <Content>
                    <h2>Content for Wizard Step 3</h2>
                </Content>
            </WizardStep>
        </WizardSteps>
    </TelerikWizard>
</div>

@code{

    async Task OnFinishHandler()
    {
        await Dialog.AlertAsync("You completed the Wizard!", "Congratulations!");
    }

    [CascadingParameter]
    public DialogFactory Dialog { get; set; }

}

See Also

In this article
Not finding the help you need? Improve this article