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 Svelte component 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>
    import { Gantt } from "@svar-ui/svelte-gantt";
    import MyTaskTemplate from "./MyTaskTemplate.svelte";

    const data = getData();
    let api;

</script>

<Gantt taskTemplate={MyTaskTemplate} {tasks} {links} {scales} bind:this={api} />

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

Related articles: