Events

• Overview
• Chart
  • Rows
  • Connectors
• Data Tree
• Preventing Default Behavior

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:

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

/* 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:

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

/* 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:

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:

/* 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:

/* 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:

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