diff --git a/components/stepper/events.md b/components/stepper/events.md index b4af02414d..ae7e5ac237 100644 --- a/components/stepper/events.md +++ b/components/stepper/events.md @@ -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 + +
+ + + + + + + +
+ +@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 @@ -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) \ No newline at end of file + * [Live Demo: Stepper Events](https://demos.telerik.com/blazor-ui/stepper/events) diff --git a/components/stepper/images/onchange-example.gif b/components/stepper/images/onchange-example.gif new file mode 100644 index 0000000000..7c525fabf6 Binary files /dev/null and b/components/stepper/images/onchange-example.gif differ