returns the reactive state object of Gantt

object getState();


objectstate object


// returns the current state of Gantt
const state = $$("myGantt").getState();

Related samples


The returned state object contains the following properties and methods:

  display: "resources",
  criticalPath: true,
  resourcesDiagram: true,
  sort: {id: "text", dir: "asc"},
  treeWidth: 400,
  top: 60, 
  left: 250,
  selected: 1.2, 
  edit: true,
  readonly: false


  • display (string) - stores the current view of Gantt ("resources" or "tasks")
  • criticalPath (boolean) - shows whether critical path is enabled
  • resourcesDiagram (boolean) - shows whether resources diagram is enabled
  • sort (object, array) - stores sorting state of tasks. Each object contains the following fields:
    • id - ID of the column being sorted ("text" for the Title column and "start_date" for the Start date column)
    • dir - sorting direction ("asc" or "desc").
  • edit (boolean) - defines whether the right panel is opened
  • treeWidth (number) - stores width of the Gantt trees
  • top (number) - number of pixels Gantt is scrolled vertically
  • left (number) - number of pixels Gantt is scrolled horizontally
  • selected (string) - ID of the selected task
  • readonly (boolean) - denotes whether widget is in a read-only state now.


  • $observe (function) - a handler to listen to changes in the current state of Gantt. It takes 2 parameters:
    • prop (string) - a reactive property to listen changes of
    • handler (function) - a function to execute when changes are made. It takes the only argument:
      • value (any) - the current value of the reactive property. The type of the value (string, array, etc) depends on a reactive property being observed.
  • batch (function)- allows to set several properties at once. Takes the only parameter:
    • props (object) - an object containing the pairs of the property name and the value to set.
Back to top