DevExtreme - Diagram - New User Actions API (v19.2.4)

We added three events to the DevExtreme Diagram widget. You can handle these events to react to user actions and run custom business logic.

Selection Changed Event

The new selectionChanged event fires when the user selects or deselects a shape or a connector. The handler receives an object which includes the items list of all selected elements in the diagram.

onSelectionChanged: function(info) {
  // info.items is a list of all selected elements
}

Item Click and Double Click Events

We added the two new events itemClick and itemDblClick. These events fire when a user clicks or double-clicks a shape or a connector. The object passed to the handler includes the item as a reference to the element clicked by the user. The item is either a DiagramShape or a DiagramConnector, and you can evaluate individual properties like item.type to find out which kind of element has been clicked.

onItemClick: function(info) {
  var item = info.item;
  if (item.type && item.type === 'rectangle') {
    // user clicked a shape of type 'rectangle'
    // item.dataItem contains the complete data object
  }
}

As you can see from the sample code, shape elements also include the property dataItem, which provides access to the original object from the data source. This object includes all data source fields, whether or not they are used by the Diagram.

For connector elements, the dataItem property is supplied if the connectors are created from a data source (as opposed to a setup using parentKeyExpr).

Demo

We prepared a jQuery CodePen demo where you can see how the new events are handled and what information they receive (check the console!).

The code samples in this post use jQuery syntax to assign the event handlers. If you need details about event handling on other DevExtreme platforms, please follow these links for Angular, Vue, React, AngularJS, Knockout, ASP.NET MVC 5 or ASP.NET Core.

Let Us Know What You Think

As always we are interested in your feedback. The Diagram widget has CTP status at this time and we can use your ideas to improve the new API before release.

Free DevExpress Products - Get Your Copy Today