Configuring the context menu

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 use the internal api object to get access to the Gantt api.

<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 with defaultMenuOptions 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, defaultMenuOptions } 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>

Showing different context for different tasks

The resolver property of the ContextMenu component allows you to specify what context to show for several areas - the same or different.

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 project 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 === "project") return false;
        return true;
    }

</script>

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

info

All parameters of the ContextMenu component see here: ContextMenu helper