Events

The available events in the Telerik Wizard for Blazor are:

• OnChange
• ValueChanged
• OnFinish

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.

Custom Wizard buttons do not trigger the OnChange event. See section Execute Business Logic With Custom Wizard Buttons.

The OnChange event handler is defined in the respective <WizardStep> tag.

@* 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 *@

@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.

Custom Wizard buttons do not trigger the OnFinish event. See section Execute Business Logic With Custom Wizard Buttons.

@* 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

• Live Demos: Wizard Events