Skip to main content

add-link

Description​

Fires when adding a link

Usage​

"add-link": (ev: {
  id?: string | number,
  link: {
    source: string | number,
    target: string | number,
    type: "e2s" | "s2s" | "e2e" | "s2e",
    lag?: number
  };
}) => boolean | void;

Parameters​

The callback of the add-link action takes the next parameters:

  • id - (optional) the id of a link that is automatically generated
  • link - (required) the link object with the following parameters:
    • source - (required) the source task ID
    • target - (required) the target task ID
    • type - (required) the link type; possible link type values:
      • e2s - "End-to-start"
      • s2s - "Start-to-start"
      • e2e - "End-to-end"
      • s2e - "Start-to-end"
    • lag - (optional) the minimum gap (in days) between predecessor and successor tasks in the auto scheduling mode | PRO feature
info

For handling the actions you can use the Event Bus methods. Returning false from the action handler will block the action (see Preventing actions)

Example​

In the example below we use the api.on() method to save the data of the added link from the add-link action into the link variable:

<script setup>
  import { ref } from "vue";
  import { getData } from "./common/data";
  import { Gantt } from "@svar-ui/vue-gantt";
  const data = getData();
  
  const link = ref(null);
  
  function init(api) {
   api.on("add-link", data => {
    link.value = data.link;
   });
  }
</script>
<template>
  <Gantt
    :tasks="data.tasks"
    :links="data.links"
    :init="init" />
</template>

You can intercept the action and return false to block it:

api.intercept("add-link", ev => {
  if (!allowAdd) return false; // prevents adding
});

Related articles: