Web Diagram Control - Early Access Preview (v19.1)

ASP.NET Team Blog
18 March 2019

We are just two months away from our next major update, v19.1. As with all the other teams, we, the ASP.NET Team, will be posting about the new features that are coming up, sharing our progress, and letting you test major new functionality before we wrap up another development cycle. Although I'll soon be posting about the new features in our existing ASP.NET toolset, in this particular post I thought I'd start with a brand new control, the DevExpress Web Diagram control.

Since it's a new one, and we're exploring what we can profitably include as functionality in its first iteration, I thought I'd introduce it, talk about its features, and point out the current limitations. That will help you to play around with it, and test the new functionality before we release the first version.

New Web Diagram Control

I'm sure you know what a Diagram Control is, and indeed know what you'd like from it (and we'll be asking you for input!), but let's start with a screenshot of the new Web Diagram Control in action:

DevExpress ASP.NET Diagram Control

Demo

We've published an online demo of the control so you can test it: DevExpress Web Diagram Control. The demo even gives you the opportunity to load your own data by clicking Import Data, although be warned there are currently some limitations to that feature.

Features

The diagram control is an advanced tool which is designed to satisfy different requirements:

1. It's a client-side control

The core part of the DevExpress Web Diagram control is implemented in TypeScript. Consequently all of the user experience and interactions run completely in the browser, the back-and-forth with the server is minimized. Apart from efficiency, this also give us the benefit that we can immediately introduce the control for all DevExpress web platforms: ASP.NET WebForms, ASP.NET Core, ASP.NET MVC, and DevExtreme.

2. Process and Flow diagrams

The new control provides for the modeling, editing, and displaying of diagram processes and flows.

We've added the capability to bind the control to your process model, and generate and auto-layout diagram items for each element of your model. An added benefit is that the control supports importing from Business Process Model Notation xml files.

3. Structures

The Web Diagram control's designer gives you the opportunity to display and edit structures, be they org charts, or representations of some kind of structured data. We plan to support two-way binding from your model to a diagram in the future.

4. Drawing and Prototyping

The designer includes a number of built-in shapes and will support importing of custom shapes in the final release. So you can use the Web Diagram Control to create, show, and edit your diagram documents with ease.

Current Limitations

Although I have -- dare I say it -- diagrammed what the control will have in its first release, this preview version has some limitations.

  1. It is not within the current CTP release of our ASP.NET toolset. We plan on releasing a CTP of the control in a later beta, but for now, please try out the demo to see and understand its capabilities.
  2. In the preview version, you can import data from external sources using an URL. Unfortunately, two-way binding is not yet supported.
  3. The library of built-in shapes currently only includes these categories: standard and flow shapes. Custom shapes are not yet supported. The shape library will be expanded in future releases. Please let us know, using the survey below, which built-in shapes are important for your projects, it will help us to prioritize our TODO list.
  4. The control supports diagram import/export using its own proprietary JSON format. Other formats (including XtraDiagram and Diagram for WPF xml files) are not yet supported.
  5. At the time of writing, it only supports one auto-layout algorithm: tree view. We will be adding more auto-layout algorithms in future versions.

Feedback

Please take a moment to answer the questions in this short survey:

Download Preview Release

While this preview release does not contain the new web diagram control, you can still download the preview release and test the other v19.1 features. For our Web Diagram control, please test it using the online demo.

If you own an active Universal or DXperience subscription, you can download the CTP build from the DevExpress Download Manager and test the v19.1 features announced so far. Once you do, take a moment to let us know how well the new features address your requirements. This will help us fine-tune our code before the launch.

If you are using a trial version and want access to the new features today, purchase a Universal subscription license and you will automatically gain access to the CTP version. If you are ready to upgrade to Universal from another subscription level, email us at clientservices@devexpress.com for preferential upgrade pricing.

Thank you.

21 comment(s)
Customer56436436
Customer56436436

Almost does not work now - in the console: TypeError  t.srcElement is undefined

18 March, 2019
Daniel Block
Daniel Block

Wow amazing, good job!

19 March, 2019
Vladimir Frizen (DevExpress)
Vladimir Frizen (DevExpress)

Hi,

Thank you for finding the time to evaluate this demo.

While this is a preview version, some issues are possible. We found and fixed an issue in Internet Explorer 10. Please check if this helped.

If possible, use a modern browser (Chrome, Edge, FireFox, Internet Explorer 11) to evaluate the component. The component will support Internet Explorer 10 and 9 in future releases.

19 March, 2019
Alexander Krakhotko (Xafari team)
Alexander Krakhotko (Xafari team)

excellent!

where can i see "control supports importing from Business Process Model Notation xml files"?

19 March, 2019
Sergio Aguaviva
Sergio Aguaviva

Good news!!, would be great for us support for the org chart. Already done a lot of work in the winforms versions. A posible conversion to web would be great!.

Thanks

19 March, 2019
Vik Handa!
Vik Handa!

This is great, a welcome addition to an already awesome component suite,

19 March, 2019
Vik Handa!
Vik Handa!

Can I add another wishlist items?   An interactive view-only mode incorporating the other DX controls.  

19 March, 2019
Vladimir Frizen (DevExpress)
Vladimir Frizen (DevExpress)

Currently, the Diagram control is in CTP and has several limitations (see the 'Current Limitations' section for detail). You can load custom data using the "Import Data' dialog.

We are considering to support several import/export data formats. JSon is one of them, but we have to choose what will be others. Would you please clarify whether you use BPMN in your applications?

If yes, do you plan to import BPMN data into the Diagram, or export data in BPMN format or both?

Do you have any additional requirements for BPMN support?

19 March, 2019
Jamal A
Jamal A

Please add the option to change the shapes style; maybe via the right click menu.

19 March, 2019
Norbert K.
Norbert K.

+1 for BPMN import/export (WinForms/WPF)

19 March, 2019
Brien King
Brien King

Been waiting for this control for a long time, glad to see it's finally here!  I will be using it quite a bit so expect a few tickets from me :)

19 March, 2019
JayJay
JayJay

Nicely done. These are the features that will keep me and presumably others coming back for more.

Now, where can I vote for a an infinite scrolling timeline scheduler?

24 March, 2019
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

JayJay,

Thanks. As for suggestions, you can always give us feedback here:

www.devexpress.com/.../Create

Please write your scenario of how you'll use the feature, why you need it, etc.

25 March, 2019
Nic Carreira
Nic Carreira

Will this be included in the DXperience Subscription?

28 March, 2019
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

@Nic, Yes, it'll be part of DXperience subscription.

28 March, 2019
Luis Alvarado Day
Luis Alvarado Day

Please include horizontal and vertical pools and lanes. These are essential for BPMN

28 March, 2019
Customer55003
Customer55003

When the final version will be released?

4 April, 2019
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

@Luis, thanks for the feedback.

@Customer55003, We are few weeks away from the final version. Typically, we release a beta version to gather/find/fix any issues we may have missed. Then a couple weeks after the beta, we'll release the final version. Stay tuned to our blogs, social media, and newsletter for more updates. Thanks.

5 April, 2019
Dietmar-Konrad Kurok
Dietmar-Konrad Kurok

Please add different line/arrow styles; especially "dotted" line are very helpful in org-charts (and sometimes also process-diagrams :-) )

12 April, 2019
Dietmar-Konrad Kurok
Dietmar-Konrad Kurok

GREAT feature!!! I have a direct idea where to use it!

12 April, 2019
Stephen Bersey
Stephen Bersey
Looking good. This is a key control that we plan on implementing!
21 October, 2019

Please login or register to post comments.