Skip to main content

api.getState()

Description​

Gets the state object that stores current values of most Gantt properties

You can apply the method to get the state of tasks, links, columns, scales, etc. See the parameters of the returned object below.

Usage​

api.getState(): object;

Returns​

The method returns an object with the following parameters:

{
  tasks: array,
  links: array,
  start: Date,
  end: Date,

  columns: false | array,
  scales: array,
  scaleHeight: number,
  cellWidth: number,
  cellHeight: number,
  cellBorders: "column" | "full",
  lengthUnit: string,
  durationUnit: string,
  displayMode: ("grid" | "chart" | "subGrid")[], // "subGrid" is PRO
  gridWidth: number,
  highlightTime?: (date: Date, unit: "day" | "hour") => string,

  taskTypes: array,
  zoom: boolean | array,
  selected: number | string,
  activeTask: number | string,

  autoScale: boolean,
  scrollTop: number,
  scrollLeft: number,

  // --- PRO FEATURES ---
  subGridWidth: number,       // PRO
  history: object,            // PRO
  undo: boolean,              // PRO
  baselines: boolean,         // PRO
  markers: array,             // PRO
  unscheduledTasks: boolean,  // PRO
  splitTasks: boolean,        // PRO
  criticalPath: object,       // PRO
  schedule: object,           // PRO
  conflicts: array,           // PRO
  showConflicts: boolean,     // PRO
  projectStart: Date,         // PRO
  projectEnd: Date,           // PRO
};

Gantt properties detailed description you can find here: Gantt properties overview.

note

The state returns displayMode as an array of panels. The array contains the preferred layout. The visible panels may differ from displayMode if the screen is not wide enough. For example, the chart requires at least 100px width to be shown in the ["grid", "chart"] display mode.

State-only properties​

area​

Represents the visible horizontal time range of the Gantt chart.

area: {
  start: number, // timestamp (ms) of the first visible date on screen
  end: number,   // timestamp (ms) of the last visible date on screen
  from: number   // horizontal scroll offset in pixels from the start of the timeline
};

conflicts​

PRO

The functionality is available in PRO Edition only

conflicts is an array of conflicts reported by the last scheduling calculation. It includes two kinds of entries: constraints and links.

conflicts: {
    type: "link" | "constraint",
    task: string | number,
    link?: string | number,
    required: Date,
}[]

You can find the detailed description for the entries here: set-conflicts.

history​

PRO

The functionality is available in PRO Edition only

history is an object with the number of operations for each undo/redo action:

history: {
  undo: number,
  redo: number,
};

scrollLeft​

Represents the horizontal scroll position:

scrollLeft: number;

scrollTop​

Represents the vertical scroll position:

scrollTop: number;

showConflicts​

PRO

The functionality is available in PRO Edition only

Shows whether the ConflictReport list is open. The value is changed by the show-conflicts action:

showConflicts: boolean;

Example​

<script setup>
   import { getData } from "./common/data";
   import { Gantt } from "@svar-ui/vue-gantt";
   
   const data = getData();
   
   function init(api){
    const { tasks, links } = api.getState();
    console.log(tasks);//output the state of tasks
    console.log(links);//output the state of links
  }
</script>

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

Related articles: