Events in ASP.NET MVC Stepper control

13 Feb 20245 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

@Html.EJS().Stepper("stepper").Steps(ViewBag.DefaultStepper).Created("function(args) { createdEvent() }").Render()

<script>
    function createdEvent() {
        // your required action here..
    }
</script>
public ActionResult Demo()
{
    List<Step> defaultStepper = new List<Step>();
    defaultStepper.Add(new Step { });
    defaultStepper.Add(new Step { });
    defaultStepper.Add(new Step { });
    defaultStepper.Add(new Step { });
    defaultStepper.Add(new Step { });

    ViewBag.DefaultStepper = defaultStepper;
    return View();
}

StepChanged

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

@using Syncfusion.EJ2.Navigations

@Html.EJS().Stepper("stepper").Steps(ViewBag.DefaultStepper).StepChanged("function(args) { stepChangedEvent(args) }").Render()

<script>
    function stepChangedEvent(args) {
        alert("Step Changed from "+args.previousStep + " to " + args.activeStep)
    }
</script>
public ActionResult Demo()
{
    List<Step> defaultStepper = new List<Step>();
    defaultStepper.Add(new Step { });
    defaultStepper.Add(new Step { });
    defaultStepper.Add(new Step { });
    defaultStepper.Add(new Step { });
    defaultStepper.Add(new Step { });

    ViewBag.DefaultStepper = defaultStepper;
    return View();
}

StepChanging

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

@using Syncfusion.EJ2.Navigations

@Html.EJS().Stepper("stepper").Steps(ViewBag.DefaultStepper).StepChanging("function(args) { stepChangingEvent(args) }").Render()

<script>
    function stepChangingEvent(args) {
        alert("Step Changing from "+args.previousStep + " to " + args.activeStep)
    }
</script>
public ActionResult Demo()
{
    List<Step> defaultStepper = new List<Step>();
    defaultStepper.Add(new Step { });
    defaultStepper.Add(new Step { });
    defaultStepper.Add(new Step { });
    defaultStepper.Add(new Step { });
    defaultStepper.Add(new Step { });

    ViewBag.DefaultStepper = defaultStepper;
    return View();
}

StepClick

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

@using Syncfusion.EJ2.Navigations

@Html.EJS().Stepper("stepper").Steps(ViewBag.DefaultStepper).StepClick("function(args) { stepClickEvent(args) }").Render()

<script>
    function stepClickEvent(args) {
        // your required action here..
    }
</script>
public ActionResult Demo()
{
    List<Step> defaultStepper = new List<Step>();
    defaultStepper.Add(new Step { });
    defaultStepper.Add(new Step { });
    defaultStepper.Add(new Step { });
    defaultStepper.Add(new Step { });
    defaultStepper.Add(new Step { });

    ViewBag.DefaultStepper = defaultStepper;
    return View();
}

BeforeStepRender

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

@using Syncfusion.EJ2.Navigations

@Html.EJS().Stepper("stepper").Steps(ViewBag.DefaultStepper).BeforeStepRender("function(args) { beforeStepRenderEvent(args) }").Render()

<script>
    function beforeStepRenderEvent(args) {
        // your required action here..
    }
</script>
public ActionResult Demo()
{
    List<Step> defaultStepper = new List<Step>();
    defaultStepper.Add(new Step { });
    defaultStepper.Add(new Step { });
    defaultStepper.Add(new Step { });
    defaultStepper.Add(new Step { });
    defaultStepper.Add(new Step { });

    ViewBag.DefaultStepper = defaultStepper;
    return View();
}