Skip to main content

taskTemplate

Description​

Optional. Defines your own template for tasks bars

Usage​

taskTemplate?: Component<{
    data: ITask;
    api: IApi;
    onaction: (ev: {
        action: string;
        data: { [key: string]: any };
    }) => void;
}>;

ITask is a single task object from the tasks array.

Parameters​

  • taskTemplate - the Vue component (SFC) to be applied as a template to the content of the task bar with the next parameters:

  • data - (required) a single task object from the tasks array

  • api - (required) the API gateway object for interacting with the Gantt API

  • onaction - (required) callback function for handling custom actions triggered inside the task template:

    • action – (required) string representing the action name
    • data – (required) object with additional data related to the action

Example​

<script setup>
    import { ref } from "vue";
    import { Gantt } from "@svar-ui/vue-gantt";
    import MyTaskTemplate from "./MyTaskTemplate.vue";

    const data = getData();
    const api = ref(null);
</script>

<template>
    <Gantt :taskTemplate="MyTaskTemplate" :tasks="data.tasks" :links="data.links" :scales="data.scales" ref="api" />
</template>

For a full example with an example of the template, custom actions and event handling, see Applying template to task bars.

Related articles: