Skip to main content

ContextMenu

Description​

ContextMenu helper

Usage​

<ContextMenu {at} {resolver} {handler} {options} {filter} />

How to import and add ContextMenu to the Gantt chart, and other usage examples see here: Configuring Context Menu

Parameters​

  • at - defines the position of the menu:
    • "bottom" - the menu appears below the target node, left borders aligned (the menu goes to the right of the action area) - - "right" - the menu appears right to the target node
    • "left" - the menu appears left to the target node
    • "bottom-left" - the menu appears below the target node, right borders aligned (the menu goes to the left of the action area)
    • "bottom-fit" - the menu appears below the target node, the width of the menu is equal to the width of the target node
    • "point" - the menu appears at the specified left/top position and ignores the provided node
  • filter - the filter function
  • datakey - data-context-id which is task id
  • resolver - the function that takes the value of the data-context-id attribute (task id) and returns the id for the resulting event
  • options - defines menu options, see description here: defaultMenuOptions
  • handler - a function that is called when the menu item is activated

Example​

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) => {
        // hide the "delete" item for projects
        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>