Configuring Gantt

As a complex widget, Gantt consists of many stand-alone Webix views with its own API.
You can redefine inner views and also you can work with the specific Gantt settings.

Basic Configuration

You can use the following settings to provide the basic config of the widget:

  • url (string) - the URL for loading data
  • links (boolean) - allows disabling links
  • preciseTimeUnit (boolean) - used to set precision for task position and width
  • markers (array, boolean) - an array of markers where each object has the following fields:
    • text (string) - marker text
    • css (string) - CSS class name
    • start_date (object) (object) - marker time. For a current time marker, use now:true instead.
  • scales (array) - array of scale lines where each object has the following fields:
    • unit (string) - scale unit ("hour", "day", "week", "quarter","month", "year")
    • step (number) - number of units per cell
    • format (string, function) - scale cell format. If it's used as a function it should return a formatted date. If defined as a string it should be a date format like "%Y-%F-%d".
  • display (string) - defines the current view of Gantt. Requires the resources property to ne enabled
  • isHoliday (funciton) - checks whether a date is a holiday
  • resources (boolean) - allows loading resources and working with them. false by default
  • treeWidth - defines the width of the Gantt trees
  • split (boolean) - allows creating split tasks
  • resourcesDiagram (boolean) - allows showing resources diagram
  • projects (boolean) - converts all tasks with children into projects
  • excludeHolidays (boolean) - allows including only working days in task duration
  • criticalPath (boolean) - toggles critical path
  • scaleStart (object) - scale start date. If not defined it will take the lowest start_date value from the dataset
  • scaleEnd (object) - scale end date. If not defined it will take the highest end_date value from the dataset
  • scaleCellWidth (number) - width of a cell in a day scale. By default, it is 200 px
  • locale (string, object) - name of the language in use or an object with language settings
  • readonly (boolean) - sets Gantt to a read-only mode. false by default
  • compact (boolean) - compact mode. false by default
  • compactWidth (number) - width of the widget, when it is switched to a compact mode. 650 by default
  • override - a Map of modified inner classes and services used for customization.
webix.ui({
  view: "gantt",
  scales: [
    {
      unit: "month",
      format: "%F, %Y",
    },
    { unit: "day", format: "%d" },
    // other scales
  ],
  url: "https://docs.webix.com/gantt-backend/"
});

Related sample:  Gantt: Multiple Scales

Note that if neither data nor scaleStart/scaleEnd is defined the start date will be the current date and the end one - a month later.

Setting scales at runtime

To set scales at runtime you should call the setScales() method of Local service. It takes 6 parameters:

  • scaleStart (object) - start date;
  • scaleEnd (object) - end date;
  • precise (boolean) - flag that defines whether to round task position and width to a smaller unit;
  • width (number) - width of the smallest cell unit;
  • height (number) - height of scale cell;
  • scales (array) - current scales array;
$$("gantt")
  .getService("local")
  .setScales(
    start,
    end,
    true,
    60,
    100,
    [{unit: "day", step: 1, format: "%d"}]
  );

Reactive Configuration

In addition, Gantt has specific reactive properties that store global app state and let developers track its changes:

  • 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.

You can get the current state of the widget with the help of the getState() method:

webix.ui({
    view:"gantt", 
    id:"myGantt",
    url: "https://docs.webix.com/gantt-backend/"
});
 
const state = $$("myGantt").getState();
/*
{ 
  display: "resources",
  top: 60, left: 250,
  selected: 1.2, edit: true,
  readonly: false, criticalPath: true,
  resourcesDiagram: false, treeWidth: 400,
  sort: {id: "text", dir: "desc"}
}
*/

How to Listen to Changes of the Reactive Properties

You can use $observe handler to listen to changes and provide custom handlers for them:

webix.ui({
  view:"gantt",
  on: {
    onInit: app => {
      const state = app.getState();
 
      // creates message with the selected task id
      state.$observe("selected", v =>
        webix.message(`ID of the selected task is: ${v}`);
      );
    },
  }
});

Related sample:  Gantt: Listening to States

In the sample above, the current state is accessed via JetApp instance which is available in the onInit event handler.

Back to top