chore(stepper):added OnChange event (#397)

* chore(stepper):added OnChange event

* Update components/stepper/events.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

* Update components/stepper/events.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

Author: ntacheva

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
+
+<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
@@ -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)