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

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.

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
3 comment(s)
Kerrin Banner
Kerrin Banner

Hi Oliver - all really useful - we are about to start some development with this soon. Tell me if these things are already capabilities or not and if not any chance they could be put into the development plan ?

 A few things that would be really useful .

1. Ability to change the shape of containers easily with click and drag - thinking of a room perimeter with maybe 6 or 7 sides.

2. Ability to drop in door and window shape to any place on perimeter/ creates break and/or adds shape into perimeter and to become an integral part for the container perimeter.

3. Ability to add dimensions to edges and draw to scale option to re-scale perimeter plus scale calc output/input 1:200 etc. 

4. Ability to create custom properties for an object and bind - example height, angle , make, model, price name etc etc


Thanks Kerrin



13 January 2020
Vladimir Frizen (DevExpress)
Vladimir Frizen (DevExpress)
Hi Kerrin,

Thank you for sharing your ideas. Currently, you can implement scenario #4 in the Diagram widget. If you face any difficulties, do not hesitate to contact us in our Support Center.

I forwarded the rest of the ideas to our R&D team.
14 January 2020
Rudy Scott
Rudy Scott
This is great--how about some hover events for tool tip type interfaces?
15 April 2020

Please login or register to post comments.