Skip to main content

open-task

Description​

Fires when expanding a branch of tasks

Usage​

"open-task": ({ 
  id: string | number,
  mode: boolean,
  nested?: boolean
}) => boolean|void;

Parameters​

The callback of the action takes an object with the following parameters:

  • id - (required) the ID of a task
  • mode - (required) defines whether a branch of tasks is opened (true) or closed (false); it's closed by default
  • nested - (optional) if true, mode is applied to the branch and all its descendant branches; if false, only the specified branch is opened or closed, and its descendant branches keep their state

With nested: true, one call can open or close a whole subtree. To expand or collapse all branches, pass id: 0 (the chart root); without nested, id: 0 has no effect.

// expands the branch and its descendants
api.exec("open-task", { id: 1, mode: true, nested: true });
// expands all branches
api.exec("open-task", { id: 0, mode: true, nested: true });
// collapses all branches
api.exec("open-task", { id: 0, mode: false, nested: true });
note

Opening a lazy branch (lazy: true, no children loaded yet) triggers request-data once for that branch. With nested: true, the request-data action also receives nested: true, so the handler should load the whole subtree in a single response, not just one level. Closing a branch (mode: false) does not request data.

info

For handling the actions you can use the Event Bus methods

Example​

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

  const data = getData();

  function init(api) {
   api.exec("open-task", {
    id: 3,
    mode: true,
   });
  }
</script>

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

Related articles: