Skip to main content

select-task

Description​

Fires when selecting a task

Usage​

"select-task": ({
   id: string | number,
   toggle?: boolean,
   range?: boolean,
   show?: "y" | "xy" | boolean,
   focus?: "grid" | "chart",
}) => boolean|void;

Parameters​

The callback of the select-task action can take an array where each object has the following parameters:

  • id - (required) the ID of the selected task
  • toggle - (optional) if set to true, enables the switching of the task state between selected and unselected. If one task is selected, in GUI holding Ctrl/Meta + left click unselects a task.
  • range - (optional) if set to true, enables selecting the range of tasks starting from the first selected task to the specified task id. In GUI holding Shift + left click will select the range of tasks.
  • show - (optional) defines whether to scroll to the selected task (true by default):
    • "y" - scroll vertically to the task row
    • "xy" - scroll both axes
    • true - scroll vertically (same as "y")
    • false - do not scroll
  • focus - (optional) defines which task element will take focus - grid cell ("grid") or chart bar ("chart")
info

For handling the actions you can use the Event Bus methods

Example​

<script setup>
  import { getData } from "./common/data";
  import { Gantt } from "@svar-ui/vue-gantt";
  
  const data = getData();
  
  function init(api) {
   api.on("select-task", ev => {
    console.log("The id of the selected task:", ev.id);
   });
  }

</script>

<template>
  <Gantt
    :tasks="data.tasks"
    :init="init" />
</template>

Related articles: How to access Gantt API