Skip to main content

ContextMenu

Description​

ContextMenu component for configuring the right-click menu options on Gantt tasks

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

function App() {
   const apiRef = useRef(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={apiRef.current} filter={filterMenu}>
         <Gantt
            ref={apiRef}
            tasks={data.tasks}
            links={data.links}
            scales={data.scales}
         />
      </ContextMenu>
   );
}

export default App;

Related articles: