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>