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

DevExtreme Team Blog
13 January 2020

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).


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

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.