Skip to main content

api.serialize()

Description​

Serializes and returns the data of the current Gantt configuration

By default, tasks are serialized. The data option lets callers serialize other collections, including calendars.

Usage​

api.serialize(config?: {
    data?: "tasks" | "links" | "assignments" | "resources" | "tree" | "calendars";
}): [] | null;

Parameters​

  • data - (optional) specifies which data collection to serialize:
    • "tasks" - returns current tasks (default when no argument is passed)
    • "links" - returns current links between tasks
    • "resources" - returns current resources
    • "assignments" - returns current resource assignments
    • "tree" - returns tasks as a flat array in depth-first traversal order, ordered by parent-child relationships
    • "calendars" - returns calendar definitions from the calendars registry; the inline global calendar is not included, use api.getCalendar().serialize() to capture it separately

Returns​

Returns an array for the specified data collection, or null if the collection is not set (for example, "calendars" when no calendars prop is provided, or "resources" when no resources are defined). When called without arguments, returns the current tasks array.

Example​

The example shows how to serialize tasks and output them to console:

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

  const data = getData();

  function init(api) {
    const tasks = api.serialize();
    console.log("Serialized tasks:", tasks);

    const resources = api.serialize({ data: "resources" });
    console.log("Serialized resources:", resources);

    const assignments = api.serialize({ data: "assignments" });
    console.log("Serialized assignments:", assignments);
  }
</script>

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

Related articles: