Skip to main content

ContextMenu API

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/vue-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.

<script setup>
   import { getData } from "../data";
   import { Gantt, ContextMenu } from "@svar-ui/vue-gantt";
   import { ref } from "vue";

   const api = ref();
   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>

<template>
   <ContextMenu :api="api" :filter="filterMenu">
      <Gantt
         ref="api"
         :tasks="data.tasks"
         :links="data.links"
         :scales="data.scales"
      />
   </ContextMenu>
</template>

Related articles: