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;
  • scales (array) - array of scale lines where each object has the following fields:
    • unit (string) - scale unit ("hour", "week", "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".
  • 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.

Reactive Configuration

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

  • 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;
  • parent (string) - stores the parent node ID of the task during creating the new one;
  • 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();
/*
{
    top: 60, left: 250,
    selected: 1.2, parent: "1",
    readonly:false
}
*/

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