Skip to main content

taskTemplate

Description

Defines your own template for tasks bars

Usage

taskTemplate?: any;

Parameters

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

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

import React, { useState } from "react";

export default function SomeComponent({ data }) {
const [clicked, setClicked] = useState(data.clicked);

function doClick(ev) {
ev.stopPropagation();
setClicked(!clicked);
// Handle custom dispatch logic here
// Example: props.onAction({ action: "custom-click", data: { clicked: !clicked, id: data.id } });
}

return (
<>
{data.type !== "milestone" ? (
<>
<div className="wx-text-out text-right">{data.text || ""}</div>
<button onClick={doClick}>
{clicked ? "Was clicked" : "Click Me"}
</button>
</>
) : (
<div className="wx-text-out text-left">{data.text || ""}</div>
)}
</>
);
}
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;
}

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

import { getData } from "../data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import MyTaskContent from "../custom/MyTaskContent.jsx";
import { useRef } from "react";

function GanttComponent() {
const data = getData();
const apiRef = useRef();

function doClick(ev) {
const data = ev;
apiRef.current.exec("update-task", {
id: data.id,
task: {
clicked: data.clicked,
},
});
}

return (
<Gantt
ref={apiRef}
onCustomClick={doClick}
taskTemplate={MyTaskContent}
tasks={data.tasks}
links={data.links}
scales={data.scales}
/>
);
}

export default GanttComponent;