Contents
- created
- beforeItemRender
Having trouble getting help?
Contact Support
Contact Support
Events in Vue Timeline component
23 Dec 20245 minutes to read
This section describes the Timeline events that will be triggered when appropriate actions are performed. The following events are available in the Timeline component.
created
The Timeline component triggers the created event when the component rendering completes.
<template>
<div class="container" style="height:250px;margin-top: 30px;">
<ejs-timeline id="timeline" :created="created">
<e-items>
<e-item content='Planning' />
<e-item content='Developing' />
<e-item content='Testing' />
<e-item content='Launch' />
</e-items>
</ejs-timeline>
</div>
</template>
<script setup>
import { TimelineComponent as EjsTimeline, ItemsDirective as EItems, ItemDirective as EItem } from "@syncfusion/ej2-vue-layouts";
const created = () => {
//Your required action here
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";
</style>
<template>
<div class="container" style="height:250px;margin-top: 30px;">
<ejs-timeline id="timeline" :created="created">
<e-items>
<e-item content='Planning' />
<e-item content='Developing' />
<e-item content='Testing' />
<e-item content='Launch' />
</e-items>
</ejs-timeline>
</div>
</template>
<script>
import { TimelineComponent, ItemsDirective, ItemDirective } from "@syncfusion/ej2-vue-layouts";
export default {
name: "App",
components: {
'ejs-timeline': TimelineComponent,
'e-items': ItemsDirective,
'e-item': ItemDirective
},
methods: {
created: function () {
//Your required action here
}
},
data() {
return {
}
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";
</style>
beforeItemRender
The Timeline component triggers the beforeItemRender event before renders each item.
<template>
<div class="container" style="height:250px;margin-top: 30px;">
<ejs-timeline id="timeline" :before-item-render="beforeItemRender">
<e-items>
<e-item content='Planning' />
<e-item content='Developing' />
<e-item content='Testing' />
<e-item content='Launch' />
</e-items>
</ejs-timeline>
</div>
</template>
<script setup>
import { TimelineComponent as EjsTimeline, ItemsDirective as EItems, ItemDirective as EItem } from "@syncfusion/ej2-vue-layouts";
const beforeItemRender = () => {
//Your required action here
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";
</style>
<template>
<div class="container" style="height:250px;margin-top: 30px;">
<ejs-timeline id="timeline" :before-item-render="beforeItemRender">
<e-items>
<e-item content='Planning' />
<e-item content='Developing' />
<e-item content='Testing' />
<e-item content='Launch' />
</e-items>
</ejs-timeline>
</div>
</template>
<script>
import { TimelineComponent, ItemsDirective, ItemDirective } from "@syncfusion/ej2-vue-layouts";
export default {
name: "App",
components: {
'ejs-timeline': TimelineComponent,
'e-items': ItemsDirective,
'e-item': ItemDirective
},
methods: {
beforeItemRender: function() {
//Your required action here
}
},
data() {
return {
}
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";
</style>