Skip to main content

ContextMenu

Description​

ContextMenu helper

Usage​

<ContextMenu at={at} resolver={resolver} handler={handler} options={options} filter={filter} />

You can import the component from wx-react-gantt .

Parameters​

  • at - defines the position of the menu:
    • "bottom" - the menu appears below the target node, left borders aligned (the menu goes to the right of the action area) - - "right" - the menu appears right to the target node
    • "left" - the menu appears left to the target node
    • "bottom-left" - the menu appears below the target node, right borders aligned (the menu goes to the left of the action area)
    • "bottom-fit" - the menu appears below the target node, the width of the menu is equal to the width of the target node
    • "point" - the menu appears at the specified left/top position and ignores the provided node
  • filter - the filter function
  • resolver - the function that takes the value of the data-context-id attribute (task id) and returns the id for the resulting event
  • options - defines menu options, see description here: defaultMenuOptions
  • handler - a function that is called when the menu item is activated

Example​

In the example below we hide the "Delete" menu option for the project type. You should also pass the api object to ContextMenu (for more details, refer to How to access Gantt API). Other usage examples see here: Configuring Context Menu.

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 === "project") 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;

Related articles: