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 @svar-ui/react-gantt .

Parameters​

All parameters description you can find here: ContextMenu

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 { useState, useCallback } from "react";
import { getData } from "../data";
import { Gantt, ContextMenu } from "@svar-ui/react-gantt";

export default function Example() {
  // expose the Gantt instance as `api` for ContextMenu
  const [api, setApi] = useState(null);
  const data = getData();

  const filterMenu = (option, task) => {
    // hide the "delete" item for projects
    const type = task.type;
    if (option.id === "delete-task" && type === "project") return false;
    return true;
  };

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

Related articles: