Skip to main content

splitTasks

The functionality is available in PRO Edition only

PRO

Description​

Enables displaying and editing split (segmented) tasks

The property controls whether the Gantt chart should display and allow editing of split tasks - tasks divided into multiple timeline segments. When splitTasks is enabled, each task can contain the segments array defined inside the tasks object. Summary tasks and milestones cannot be split.

Usage​

splitTasks?: boolean;

Parameters​

  • true - enables the split-task functionality:
    • Gantt displays task segments on the timeline
    • Editor supports segments editing
    • and a button for split actions appears in Toolbar and ContextMenu
  • false - (default) disables the split-task functionality

Example​

import { useRef, useState, useEffect } from "react";
import { getSplitTasksData } from "../data";
import { Gantt, ContextMenu, Editor } from "@svar/react-gantt";

export default function SplitTasksExample() {
  const ganttRef = useRef(null);
  const [api, setApi] = useState(null);
  const data = getSplitTasksData();

  useEffect(() => {
    // after mount the Gantt instance is available via ref
    setApi(ganttRef.current);
  }, []);

  return (
    <>
      <ContextMenu api={api}>
        <Gantt
          ref={ganttRef}
          tasks={data.tasks}
          splitTasks={true}
        />
      </ContextMenu>

      <Editor api={api} />
    </>
  );
}

Related articles: split-task