Skip to main content

update-task

Description​

Fires when updating a task

Usage​

"update-task": ({
   id:  string | number,
   task: Partial<ITask>,
   diff?: number,
   inProgress?: boolean,
   eventSource?: string,

   //Pro feature
   segmentIndex?: number
}) => boolean | void;

Parameters​

The callback of the update-task action can take an object with the following parameters:

  • id - (required) the task ID
  • task - (required) the tasks object
  • diff - (optional) the number of units for the start or/and end date values to be changed (in the tasks object)
  • inProgress - (optional) if true, marks that the task update is in progress
  • eventSource - (optional) the name of an action that triggered the update
  • segmentIndex - (optional) the index of the segment being updated (only for split tasks) | PRO feature
note

When updating a task and date-related fields are modified, make sure all three date fields are provided together: start, end, and duration.

The exception is making a task unscheduled: passing start: null is enough.

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​

The example below shows how to clear the text of task 20 by clicking the button:

<script setup>
  import { getData } from "./common/data";
  import { Gantt } from "@svar-ui/vue-gantt";
  import { Button } from "@svar-ui/vue-core";
  import { ref } from "vue";
  
  const data = getData();
  
  const api = ref(null);

  function clearTaskText() {
    api.value.exec("update-task", { id: 20, task: { text: "" } });
  }

</script>

<template>
  <Button type="primary" :onclick="clearTaskText">Clear text for task 20</Button>
  <Gantt ref="api" :tasks="data.tasks" :links="data.links" :scales="data.scales" />
</template>

Related articles: