Skip to main content

select-task

Description​

Fires when selecting a task

Usage​

"select-task": ({
    id: string | number,
    toggle?: boolean,
    range?: boolean,
    show?: boolean,
}) => boolean|void;

Parameters​

The callback of the select-task action can take an array where each object has the following parameters:

  • id - (required) the ID of the selected task
  • toggle - (optional) if set to true, enables the switching of the task state between selected and unselected. If one task is selected, in GUI holding Ctrl + left click unselects a task.
  • range - (optional) if set to true, enables selecting the range of tasks starting from the first selected task to the specified task id. In GUI holding Shift + left click will select the range of tasks.
  • show - (optional) defines whether to scroll to the selected task (true).
info

For handling the actions you can use the Event Bus methods

Example​

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

const GanttComponent = () => {
  const data = getData();
  const apiRef = useRef(null);

  useEffect(() => {
    if (apiRef.current) {
      apiRef.current.on("select-task", ev => {
        console.log("The id of the selected task:", ev.id);
      });
    }
  }, [apiRef.current]);

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

export default GanttComponent;

Related articles: How to access Gantt API