Events in EJ2 JavaScript Stepper control

5 Jan 20249 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.

var stepper = new ej.navigations.Stepper({
  steps: [{}, {}, {}, {}],
  created: () => {
    //Your required action here
  }
});
stepper.appendTo("#stepper");
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Essential JS 2 - Stepper</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta name="description" content="Essential JS 2">
  <meta name="author" content="Syncfusion">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet">
  <!--system js reference and configuration-->
  <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
  <style>
    #container {
      margin-top: 30px;
      padding: 30px;
    }
  </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

  <div id="container">
    <nav id="stepper"></nav>
  </div>
  
  <script src="index.js" type="text/javascript"></script>
</body>

</html>

stepChanged

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

var stepper = new ej.navigations.Stepper({
  steps: [{}, {}, {}, {}],
  stepChanged: (args) =>{
    alert("Step changed from "+args.previousStep + " to " + args.activeStep)
  }
});
stepper.appendTo("#stepper");
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Essential JS 2 - Stepper</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta name="description" content="Essential JS 2">
  <meta name="author" content="Syncfusion">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet">
  <!--system js reference and configuration-->
  <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
  <style>
    #container {
      margin-top: 30px;
      padding: 30px;
    }
  </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

  <div id="container">
    <nav id="stepper"></nav>
  </div>
  
  <script src="index.js" type="text/javascript"></script>
</body>

</html>

stepChanging

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

var stepper = new ej.navigations.Stepper({
  steps: [{}, {}, {}, {}],
  stepChanging: (args) =>{
    alert("Step changing from "+args.previousStep + " to " + args.activeStep)
  }
});
stepper.appendTo("#stepper");
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Essential JS 2 - Stepper</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta name="description" content="Essential JS 2">
  <meta name="author" content="Syncfusion">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet">
  <!--system js reference and configuration-->
  <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
  <style>
    #container {
      margin-top: 30px;
      padding: 30px;
    }
  </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

  <div id="container">
    <nav id="stepper"></nav>
  </div>
  <script src="index.js" type="text/javascript"></script>
</body>

</html>

stepClick

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

var stepper = new ej.navigations.Stepper({
  steps: [{}, {}, {}, {}],
  stepClick: (args) =>{
    //Your required action here
  }
});
stepper.appendTo("#stepper");
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Essential JS 2 - Stepper</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta name="description" content="Essential JS 2">
  <meta name="author" content="Syncfusion">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet">
  <!--system js reference and configuration-->
  <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
  <style>
    #container {
      margin-top: 30px;
      padding: 30px;
    }
  </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

  <div id="container">
    <nav id="stepper"></nav>
  </div>
  
  <script src="index.js" type="text/javascript"></script>
</body>

</html>

beforeStepRender

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

var stepper = new ej.navigations.Stepper({
  steps: [{}, {}, {}, {}],
  beforeStepRender: (args) =>{
    //Your required action here
  }
});
stepper.appendTo("#stepper");
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Essential JS 2 - Stepper</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta name="description" content="Essential JS 2">
  <meta name="author" content="Syncfusion">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet">
  <!--system js reference and configuration-->
  <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
  <style>
    #container {
      margin-top: 30px;
      padding: 30px;
    }
  </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

  <div id="container">
    <nav id="stepper"></nav>
  </div>

  <script src="index.js" type="text/javascript"></script>
</body>
</html>