Events in ASP.NET CORE Stepper control

13 Feb 20243 minutes to read

This section describes the Stepper events that will be triggered when an appropriate actions are performed. The following events are available in the Stepper control.

created

The Stepper control triggers the created event when the control rendering is completed.

@using Syncfusion.EJ2.Navigations;

<ejs-stepper id="stepper" created="function(args){ createdEvent(args) }">
    <e-stepper-steps>
        <e-stepper-step></e-stepper-step>
        <e-stepper-step></e-stepper-step>
        <e-stepper-step></e-stepper-step>
        <e-stepper-step></e-stepper-step>
        <e-stepper-step></e-stepper-step>
    </e-stepper-steps>
</ejs-stepper>

<script>
    function createdEvent() {
        // your required action here..
    }
</script>

stepChanged

The Stepper control triggers the stepChanged event after the active step is changed.

@using Syncfusion.EJ2.Navigations;

<ejs-stepper id="stepper" stepChanged="function(args){ stepChangedEvent(args) }">
    <e-stepper-steps>
        <e-stepper-step></e-stepper-step>
        <e-stepper-step></e-stepper-step>
        <e-stepper-step></e-stepper-step>
        <e-stepper-step></e-stepper-step>
        <e-stepper-step></e-stepper-step>
    </e-stepper-steps>
</ejs-stepper>

<script>
    function stepChangedEvent(args) {
        alert("Step Changed from "+args.previousStep + " to " + args.activeStep)
    }
</script>

stepChanging

The Stepper control triggers the stepChanging event before the active step change.

@using Syncfusion.EJ2.Navigations;

<ejs-stepper id="stepper" stepChanging="function(args){ stepChangingEvent(args) }">
    <e-stepper-steps>
        <e-stepper-step></e-stepper-step>
        <e-stepper-step></e-stepper-step>
        <e-stepper-step></e-stepper-step>
        <e-stepper-step></e-stepper-step>
        <e-stepper-step></e-stepper-step>
    </e-stepper-steps>
</ejs-stepper>

<script>
    function stepChangingEvent(args) {
        alert("Step Changing from "+args.previousStep + " to " + args.activeStep)
    }
</script>

stepClick

The Stepper control triggers the stepClick event when the step is clicked.

@using Syncfusion.EJ2.Navigations;

<ejs-stepper id="stepper" stepClick="function(args){ stepClickEvent(args) }">
    <e-stepper-steps>
        <e-stepper-step></e-stepper-step>
        <e-stepper-step></e-stepper-step>
        <e-stepper-step></e-stepper-step>
        <e-stepper-step></e-stepper-step>
        <e-stepper-step></e-stepper-step>
    </e-stepper-steps>
</ejs-stepper>

<script>
    function stepClickEvent(args) {
        // your required action here..
    }
</script>

beforeStepRender

The Stepper control triggers the beforeStepRender event before rendering each step.

@using Syncfusion.EJ2.Navigations;

<ejs-stepper id="stepper" beforeStepRender="function(args){ beforeStepRenderEvent(args) }">
    <e-stepper-steps>
        <e-stepper-step></e-stepper-step>
        <e-stepper-step></e-stepper-step>
        <e-stepper-step></e-stepper-step>
        <e-stepper-step></e-stepper-step>
        <e-stepper-step></e-stepper-step>
    </e-stepper-steps>
</ejs-stepper>

<script>
    function beforeStepRenderEvent(args) {
        // your required action here..
    }
</script>