Events

Overview

This article explains how to work with the events of the Gantt chart.

You can listen to the events of rows and connectors by attaching event listeners to the chart. Also, it is possible to listen to the events of the data tree, which fire when the chart is edited in the Live Edit mode. The last section explains how to prevent the default behavior of the chart.

See the Event Listeners and Interactivity articles to learn more about events.

Note: To learn in detail about Live Edit actions that trigger data tree and other events, read Live Edit: Default Behavior.

Chart

Rows

You can listen to the following events of rows:

ValueDescription
rowCollapseExpandA row has been collapsed or expanded.
rowClickA row has been clicked on.
rowDblClickA row has been double-clicked on.
rowMouseDownThe left mouse button has been pressed on a row.
rowMouseMoveThe mouse is being moved over a row.
rowMouseOutThe mouse has been moved out of a row.
rowMouseOverThe mouse has been moved over a row.
rowMouseUpThe left mouse button has been released over a row.
rowSelectA row has been selected.

In the sample below, event listeners are used to update the chart title when "rowMouseOver", "rowClick", "rowDblClick", and "rowCollapseExpand" fire:

Playground

/* listen to the rowMouseOver event
and update the chart title */
chart.listen("rowMouseOver", function (e) {
  var itemName = e.item.get("name");
  chart.title("Events: Chart<br><br>" +
              "< <span style = 'color:#990000'>" +
              itemName + "</span>: rowMouseOver >");
});

/* listen to the rowClick event
and update the chart title */
chart.listen("rowClick", function (e) {
  var itemName = e.item.get("name");
  chart.title("Events: Chart<br><br>" +
              "< <span style = 'color:#990000'>" +
              itemName + "</span>: rowClick >");
});

/* listen to the rowDblClick event
and update the chart title */
chart.listen("rowDblClick", function (e) {
  var itemName = e.item.get("name");
  chart.title("Events: Chart<br><br>" +
              "< <span style = 'color:#990000'>" +
              itemName + "</span>: rowDblClick >");
});

/* listen to the rowCollapseExpand event
and update the chart title */
chart.listen("rowCollapseExpand", function (e) {
  var itemName = e.item.get("name");
  chart.title("Events: Chart<br><br>" +
              "< <span style = 'color:#990000'>" +
              itemName + "</span>: rowCollapseExpand >");
});

Connectors

Here are the events of connectors you can listen to:

ValueDescription
beforeCreateConnector A connector is about to be created in the Live Edit mode.
connectorClickA connector has been clicked on.
connectorDblClickA connector has been double-clicked on.
connectorMouseDownThe left mouse button has been pressed on a connector.
connectorMouseMoveThe mouse is being moved over a connector.
connectorMouseOutThe mouse has been moved out of a connector.
connectorMouseOverThe mouse has been moved over a connector.
connectorMouseUpThe left mouse button has been released over a connector.
connectorSelectA connector has been selected.

In the following sample, the Live Edit mode is enabled. The "connectorMouseOver", "connectorClick", "connectorDblClick", and "beforeCreateConnector" events are used to update the chart title:

Playground

/* listen to the connectorMouseOver event
and update the chart title */
chart.listen("connectorMouseOver", function (e) {
  var sourceName = e.fromItem.get("name");
  var targetName = e.toItem.get("name");
  var type = e.connType;
  chart.title("Events: Connectors<br><br>" +
              "< <span style = 'color:#990000'>" +
              sourceName + " – " + targetName +
              " (" + type + ")</span>: connectorMouseOver >");
});

/* listen to the connectorClick event
and update the chart title */
chart.listen("connectorClick", function (e) {
  var sourceName = e.fromItem.get("name");
  var targetName = e.toItem.get("name");
  var type = e.connType;
  chart.title("Events: Connectors<br><br>" +
              "< <span style = 'color:#990000'>" +
              sourceName + " – " + targetName +
              " (" + type + ")</span>: connectorClick >");
});

/* listen to the connectorDblClick event
and update the chart title */
chart.listen("connectorDblClick", function (e) {
  var sourceName = e.fromItem.get("name");
  var targetName = e.toItem.get("name");
  var type = e.connType;
  chart.title("Events: Connectors<br><br>" +
              "< <span style = 'color:#990000'>" +
              sourceName + " – " + targetName +
              " (" + type + ")</span>: connectorDblClick >");
});

/* listen to the beforeCreateConnector event
and update the chart title */
chart.listen("beforeCreateConnector", function (e) {
  var sourceName = e.source.get("name");
  var targetName = e.target.get("name");
  var type = e.connectorType;
  chart.title("Events: Connectors<br><br>" +
              "< <span style = 'color:#990000'>" +
              sourceName + " – " + targetName +
              " (" + type + ")</span>: beforeCreateConnector  >");
});

Data Tree

When the chart is edited in the Live Edit mode, the following events of the data tree fire:

ValueDescription
treeItemMoveA data item has been moved.
treeItemUpdateA data item has been updated.

Note: To learn in detail about Live Edit actions that trigger data tree and other events, read Live Edit: Default Behavior.

In the sample below, there is a Gantt chart with the Live Edit mode enabled. When you drag and drop rows, "treeItemMove" is triggered. When you edit elements and the data grid text, "treeItemUpdate" fires.

Both events are used to update the chart title:

Playground

/* listen to the treeItemUpdate event
and update the chart title */
treeData.listen("treeItemUpdate", function (e) {
  var itemName = e.item.get("name");
  chart.title("Events: Tree Data<br><br>< " +
              "<span style = 'color:#990000'>" +
              itemName + ": </span> treeItemUpdate >");
});

/* listen to the treeItemMove event
and update the chart title */
treeData.listen("treeItemMove", function (e) {
  var itemName = e.item.get("name");
  chart.title("Events: Tree Data<br><br>< " +
              "<span style = 'color:#990000'>" +
              itemName + "</span>: treeItemMove >");
});

Preventing Default Behavior

To prevent the default behavior of the chart, use the preventDefault() method.

When you click on a row of Gantt chart, the row is selected, and when you double-click on a row with a parent element, this element is expanded or collapsed. In the sample below, the "rowClick" and "rowDblClick" row events are used to prevent this behavior:

Playground

/* listen to the rowClick event
and prevent the default behavior of the chart */
chart.listen("rowClick", function (e) {
  e.preventDefault();
});

/* listen to the rowDblClick event
and prevent the default behavior of the chart */
chart.listen("rowDblClick", function (e) {
  e.preventDefault();
});

In the following sample, the Live Edit mode is enabled. You can draw a connector preview, but cannot create a connector – this feature is disabled with the help of the "beforeCreateConnector" connector event:

Playground

/* listen to the beforeCreateConnector event
and prevent the default behavior of the chart */
chart.listen("beforeCreateConnector", function (e) {
  e.preventDefault();
});