Skip to main content

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 "@svar-ui/react-gantt" and wrap Gantt into the ContextMenu tag. You should also pass the api object to the ContextMenu component.

import { useState } from "react";
import { getData } from "../data";
import { Gantt, ContextMenu } from "@svar-ui/react-gantt";

export default function Example() {
  const [api, setApi] = useState(null);
  const data = getData();

  return (
    <ContextMenu api={api}>
      <Gantt
        ref={el => setApi(el)}
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
      />
    </ContextMenu>
  );
}

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

export default function Example() {
  const [api, setApi] = useState(null);
  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" },
  ];

  return (
    <ContextMenu api={api} options={options}>
      <Gantt
        ref={el => setApi(el)}
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
      />
    </ContextMenu>
  );
}

You can also use the getMenuOptions to modify the ContextMenu.

import { useState } from "react";
import { getData } from "../data";
import { Gantt, getMenuOptions, ContextMenu } from "@svar-ui/react-gantt";

export default function Example() {
  const [api, setApi] = useState(null);
  const data = getData();

  const options = [
    ...getMenuOptions,
    {
      id: "add-task",
      text: "Add",
      icon: "wxi-plus",
      data: [{ id: "add-task:child", text: "Child task" }],
    },
    //other options
  ];

  return (
    <ContextMenu api={api} options={options}>
      <Gantt
        ref={el => setApi(el)}
        tasks={data.tasks}
        scales={data.scales}
      />
    </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 { useState } from "react";
import { getData } from "../data";
import { Gantt, ContextMenu } from "@svar-ui/react-gantt";

export default function Example({ skinSettings }) {
  const [api, setApi] = useState(null);
  const data = getData();

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

  return (
    <ContextMenu api={api} resolver={resolver}>
      <Gantt
        ref={el => setApi(el)}
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
      />
    </ContextMenu>
  );
}

Filtering menu options​

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

import { useState } from "react";
import { getData } from "../data";
import { Gantt, ContextMenu } from "@svar-ui/react-gantt";

export default function Example() {
  const [api, setApi] = useState(null);
  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={api} filter={filterMenu}>
      <Gantt
        ref={el => setApi(el)}
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
      />
    </ContextMenu>
  );
}

Related samples: