Skip to main content

group-tasks

PRO

The functionality is available in PRO Edition only

Description​

Fires when grouping tasks by a specified field

Usage​

"group-tasks": ({
  field: string,
  taskHierarchy?: boolean,
  resourceHierarchy?: boolean,
  multipleResources?: boolean,
  ungrouped?: false | "top" | "bottom",
  resolver?: (task: ITask) => any,
}) => boolean | void;
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)

Parameters​

The callback of the group-tasks action can take an object with the following parameters:

  • field - (required) the field to group tasks by; use "resource" to group by assigned resources, or any task field name (e.g., "status", "priority")
  • taskHierarchy - (optional) if true, preserves the task parent/child structure within each group; Default: false
  • resourceHierarchy - (optional) if true, shows the resource hierarchy (teams and people) within resource groups; applies only when field is "resource"; Default: true
  • multipleResources - (optional) controls how tasks assigned to multiple resources are displayed: if false, the task appears under each assigned resource separately; if true, the task appears once under a combined group label (e.g., "Alice, Bob"); applies only when field is "resource"; Default: false
  • ungrouped - (optional) controls placement of tasks that have no value for the grouping field: false hides them, "top" places them above all groups, "bottom" places them below all groups; Default: "bottom"
  • resolver - (optional) a custom function (task: ITask) => value to extract the group value from a task; overrides the default task[field] lookup; not applicable when field is "resource"

Example​

Use the api.exec method to trigger the action:

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

  const data = getData();
  const api = ref();

  function init(ganttApi) {
    api.value = ganttApi;
  }

  function groupByResource() {
    api.value.exec("group-tasks", { field: "resource" });
  }
</script>

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

Prevent grouping​

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

api.intercept("group-tasks", ev => {
  if (!allowGrouping) return false; // prevents grouping
});

Related articles: