Configuring the context menu

info

The description of the ContextMenu component see here: ContextMenu helper

Adding default context menu

To add context menu with default menu options, import the ContextMenu component from "wx-react-gantt" and wrap Gantt into the ContextMenu tag. You should also pass the api object to the ContextMenu component.

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

const MyComponent = () => {
  const apiRef = useRef();
  const data = getData();

  useEffect(() => {
    apiRef.current = api;
  }, []);

  return (
    <ContextMenu api={apiRef.current}>
      <Gantt
        apiRef={apiRef}
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
      />
    </ContextMenu>
  );
};

export default MyComponent;

Configuring menu options

To customize menu options, import the ContextMenu component, and then modify the options settings. To add subitems, add objects to the data array inside the options item object.

Example:

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

const MyComponent = () => {
  const apiRef = useRef();
  const data = getData();

  const options = [
    {
      id: "add-task",
      text: "Add",
      icon: "wxi-plus",
      data: [{ id: "add-task:child", text: "Child task" }],
    },
    { type: "separator" },
    {
      id: "edit-task",
      text: "Edit",
      icon: "wxi-edit",
    },
    { id: "cut-task", text: "Cut", icon: "wxi-content-cut" },
  ];

  useEffect(() => {
    if (apiRef.current) {
      apiRef.current = apiRef.current;
    }
  }, [apiRef.current]);

  return (
    <ContextMenu api={apiRef.current} options={options}>
      <Gantt
        apiRef={apiRef}
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
      />
    </ContextMenu>
  );
};

export default MyComponent;

You can also import the ready-made defaultMenuOptions array, modify the required parameters, and pass the modified array to the ContextMenu.

Showing context menu for specific tasks

The resolver property of the ContextMenu component allows you to define tasks for which to show the menu.

The example below shows how to show the context menu only for tasks with the id > 2.

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

const MyComponent = ({ skinSettings }) => {
  const data = getData();
  const apiRef = useRef();

  // show menu for certain tasks
  function resolver(id) {
    return id > 2;
  }

  return (
    <ContextMenu api={apiRef.current} resolver={resolver}>
      <Gantt
        apiRef={apiRef}
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
      />
    </ContextMenu>
  );
};

export default MyComponent;

Filtering menu options

In the example below we hide the "Delete" menu option for the "summary" task type:

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

const MyComponent = () => {
    const apiRef = useRef();
    const data = getData();

    const filterMenu = (option, task) => {
        const type = task.type;
        if (option.id === "delete-task" && type === "summary") return false;
        return true;
    };

    return (
        <ContextMenu api={apiRef.current} filter={filterMenu}>
            <Gantt
                apiRef={apiRef}
                tasks={data.tasks}
                links={data.links}
                scales={data.scales}
            />
        </ContextMenu>
    );
};

export default MyComponent;