Skip to main content

add-link

Description​

Fires when adding a link

Usage​

"add-link": ({
  id?: string | number,
  link: object;
}) => boolean|void;

Parameters​

The callback of the add-link action takes the next parameters:

  • id - (optional) the id of a link that is automatically generated
  • link - (required) the link object with the following parameters:
    • source - (required) the source task ID
    • target - (required) the target task ID
    • type - (required) the link type; possible link type values:
      • e2s - "End-to-start"
      • s2s - "Start-to-start"
      • e2e - "End-to-end"
      • s2e - "Start-to-end"
info

For handling the actions you can use the Event Bus methods

Example​

In the example below we use the api.intercept() method to change the link variable value replacing it with the relevant data from the add-link action:

import { useEffect, useRef, useState } from "react";
import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const SomeComponent = () => {
  const data = getData();
  const [link, setLink] = useState(null);
  const apiRef = useRef(null);

  useEffect(() => {
    if (apiRef.current) {
      apiRef.current.on("add-link", (data) => {
        setLink(data.link);
      });
    }
  }, [apiRef.current]);

  return (
    <Gantt
      ref={apiRef}
      tasks={data.tasks}
      links={data.links}
      //other settings 
    />
  );
};

export default SomeComponent;

Related articles: How to access Gantt API