Skip to main content

Summary task

SVAR Vue Gantt supports several task types. This article describes the summary task type.

A summary task groups other tasks, milestones, or nested summary tasks.

  • Its start and end dates are calculated automatically from its child tasks
  • If a summary task is added with no child tasks, its start and end dates should be defined
  • A user can drag a summary task only with its child tasks. If a summary task is shifted, all its child tasks will be moved too

The summary property | PRO feature allows managing automatically summary task progress and make parent tasks convert to summary automatically.

Define a summary task via the tasks array:

const tasks = [
  {
    id: 3,
    text: "Phase 1",
    type: "summary",
    open: true,
    start: new Date(2026, 3, 10),
    end: new Date(2026, 3, 15),
  },
];

Disabling drag for summary tasks​

You can prevent users from dragging summary tasks in the UI. This is done by intercepting (api.intercept()) the drag-task action and checking the task type via the getTask method.

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

  const data = getData();

  function init(api) {
    api.intercept("drag-task", ({ id, top }) => {
      return !(typeof top === "undefined" && api.getTask(id).type == "summary");
    });
  }
</script>

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

Enabling the auto calculation of summary tasks' progress​

By default, a user can set the progress of tasks only manually. The example below demonstrates how to enable the auto calculation of summary tasks' progress that will be based on the progress of its child tasks. You should set the autoProgress of summary to true:

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

  const data = getData();
  const api = ref(null);
</script>

<template>
  <Gantt
    ref="api"
    :tasks="data.tasks"
    :links="data.links"
    :scales="data.scales"
    :cellWidth="30"
    :summary="{
      autoProgress: true,
    }"
  />
</template>

Related sample: Summary task: auto progress

Making parent tasks auto convert into summary tasks​

By default, a user can convert other tasks into a summary task only manually. The example below shows how to make all parent tasks automatically convert into a summary task and vice versa (from "summary" to "task" in case no child tasks found in a task). You should set the autoConvert of summary to true:

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

  const data = getData();
  const api = ref(null);
</script>

<template>
  <Gantt
    ref="api"
    :tasks="data.tasks"
    :links="data.links"
    :scales="data.scales"
    :cellWidth="30"
    :summary="{
      autoConvert: true
    }"
  />
</template>

Related sample: Summary task: auto type