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

<script>
    import { getData } from "../data";
    import { Gantt, ContextMenu } from "wx-svelte-gantt";

    let api;
    const data = getData();
</script>

<ContextMenu {api}>
    <Gantt
        bind:api
        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:

<script>
  import { getData } from "../data";
  import { Gantt, ContextMenu } from "wx-svelte-gantt";

  let api;

  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" },
  ];
</script>

<ContextMenu {api} {options} >
    <Gantt
        bind:api        
        tasks={data.tasks}
        links={data.links}
        scales={data.scales} />
</ContextMenu>

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.

<script>
    import { getData } from "../data";
    import { Gantt, ContextMenu } from "wx-svelte-gantt";

    export let skinSettings;
    let api;
    const data = getData();

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

</script>

<ContextMenu {api} {resolver}>
    <Gantt
        bind:api
        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:

<script>
    import { getData } from "../data";
    import { Gantt, ContextMenu } from "wx-svelte-gantt";

    let api;
    const data = getData();

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

</script>

<ContextMenu {api} filter={filterMenu} >
    <Gantt
        bind:api
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
    />
</ContextMenu>