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.
Custom Wizard buttons do not trigger the
OnChangeevent. 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 first and second step (code snippet below)
@* 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 (code snippet below).
@* 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
OnFinishevent. See section Execute Business Logic With Custom Wizard Buttons.
Handle the OnFinish event of the Wizard (code snippet below)
@* 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; }
}