taskTemplate

Description

Defines your own template for tasks bars

Usage

taskTemplate?: any;

Parameters

• taskTemplate - the Svelte component to be applied as a template to the content of the task bar

Below is an example of the component that uses the Svelte dispatch to send the custom-click action to Gantt.

<script>
    import { createEventDispatcher } from "svelte";

    export let data;

    const dispatch = createEventDispatcher();

    function doClick() {
        dispatch("action", {
            action: "custom-click",
            data: {
                clicked: !data.clicked,
                id: data.id,
            },
        });
    }
</script>

{#if data.type !== "milestone"}
    <div class="wx-text-out text-right">{data.text || ""}</div>
    <button on:click|stopPropagation={doClick}>
        {#if data.clicked}Was clicked{:else}Click Me{/if}
    </button>
{:else}
    <div class="wx-text-out text-left">{data.text || ""}</div>
{/if}

<style>
    button {
        font-size: 10px;
        position: relative;
        z-index: 2;
        font: var(--wx-gantt-bar-font);
    }

    .text-right {
        left: 100%;
        top: -2px;
    }

    .text-left {
        right: 100%;
        top: -2px;
    }

    .text-right,
    .text-left,
    button {
        padding: 0 2px;
        font-size: 12px;
    }
</style>

In the next example we import the component above and listen to the custom-click action to trigger the update-task action on click.

<script>
    import { getData } from "../data";
    import { Gantt } from "wx-svelte-gantt";
    import MyTaskContent from "../custom/MyTaskContent.svelte";

    const data = getData();
    let api;

    function doClick(ev) {
        const data = ev.detail;
        api.exec("update-task", {
            id: data.id,
            task: {
                clicked: data.clicked,
            },
        });
    }
</script>

<Gantt
    bind:api
    on:custom-click={doClick}
    taskTemplate={MyTaskContent}
    tasks={data.tasks}
    links={data.links}
    scales={data.scales}
/>