Skip to main content

Event handling

Attaching event listeners​

You can add any user-defined handler to any of the available events. To do this, use the diagram.events.on() method with the following parameters:

  • name - (string) the name of the event
  • handler - (function) the handler function
diagram.events.on("ShapeClick", (id) => {
    alert("You've just clicked an item with id="+id);
});

You can attach several handlers to the same event and all of them will be executed. If some of handlers return false, the related operations will be blocked. Event handlers are processed in the same order that they are attached.

Detaching event listeners​

To detach events, use diagram.events.detach() method:

diagram.events.on("CustomEvent", args);
 
diagram.events.detach("CustomEvent");

Calling events​

To call events, use the diagram.events.fire().

diagram.events.fire("CustomEvent", args);
// where args is an array of arguments

Normally, events are called automatically and you don't need to use this method.

List of supported events​

Diagram events​

Check the full list of the Diagram API events in the API reference.

Editor events​

The list of the Diagram editor API events is given in the API section.

note

In addition to the events of the Diagram editor, you may also apply events of the diagram object while working in the editor view. For example:

const editor = new dhx.DiagramEditor("editor_container", {
    controls: { autoLayout: false }
});
editor.parse(data);

editor.diagram.events.on("ShapeClick", (id) => {
    alert("You've just clicked an item with id=" + id);
});

This way can be also used if you need to apply the events which are listed below.

CellManager events​

Check the full list of the CellManager API events in the API Reference.

DataCollection events​

Check the full list of the DataCollection API events in the API Reference.

InlineEditor events​

Check the full list of the InlineEditor API events in the API Reference.

Selection events​

Check the full list of the Selection API events in the API Reference.