Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 53 additions & 2 deletions components/stepper/events.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,58 @@ position: 25

# Stepper Events

This article explains the events available in the Telerik Stepper for Blazor
This article explains the events available in the Telerik Stepper for Blazor:

* [OnChange](#onchange)
* [ValueChanged](#valuechanged)

## OnChange

The `OnChange` event fires before the current step has changed. The handler receives an object of type `StepperStepChangeEventArgs` which exposes the following fields:

* `TargetIndex` - provides the index of the targeted new step.
* `IsCancelled` - specifies whether the event is canceled and the built-in action is prevented.

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


![OnChange](images/onchange-example.gif)

````CSHTML
@* Handle the OnChange event of the steps *@

Next targeted step index: @TargetIndex

<div style="width:500px">
<TelerikStepper>
<StepperSteps>
<StepperStep Text="1" OnChange="@OnChangeHandler1" ></StepperStep>
<StepperStep Text="2" OnChange="@OnChangeHandler2"></StepperStep>
<StepperStep Text="3"></StepperStep>
</StepperSteps>
</TelerikStepper>
</div>

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

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

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

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

}

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


## ValueChanged
Expand Down Expand Up @@ -48,4 +99,4 @@ The Telerik Stepper for Blazor supports ValueChanged event. It fires upon every

## See Also

* [Live Demo: Stepper Events](https://demos.telerik.com/blazor-ui/stepper/events)
* [Live Demo: Stepper Events](https://demos.telerik.com/blazor-ui/stepper/events)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.