Syncfusion AI Assistant

How can I help you?

Events in EJ2 JavaScript Timeline control

5 Mar 20266 minutes to read

This section describes Timeline events triggered by relevant actions. The following events are available in the Timeline control.

Created

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

var productLifecycle = [
  { content: 'Planning' },
  { content: 'Developing' },
  { content: 'Testing' },
  { content: 'Launch' },
];

// Initializes the Timeline control
var timeline = new ej.layouts.Timeline({
  items: productLifecycle,
  created: function () {
    //your required action here 
  }
});

// Render initialized Timeline.
timeline.appendTo("#timeline");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - Timeline</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/33.1.44/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/33.1.44/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>

    <div id="container" style="height: 300px;">
        <!--Element to render the Timeline control-->
        <div id="timeline"></div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
#container {
    visibility: hidden;
    margin-top: 30px;
    padding: 30px;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

BeforeItemRender

The Timeline control triggers the beforeItemRender event before rendering each item.

var productLifecycle = [
  { content: 'Planning' },
  { content: 'Developing' },
  { content: 'Testing' },
  { content: 'Launch' },
];

// Initializes the Timeline control
var timeline = new ej.layouts.Timeline({
  items: productLifecycle,
  beforeItemRender: function (args) {
    //your required action here 
  }
});

// Render initialized Timeline.
timeline.appendTo("#timeline");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - Timeline</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/33.1.44/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/33.1.44/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>

    <div id="container" style="height: 300px;">
        <!--Element to render the Timeline control-->
        <div id="timeline"></div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
#container {
    visibility: hidden;
    margin-top: 30px;
    padding: 30px;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}