DevExtreme - Web Diagram Control CTP (v19.1) - Getting Started

DevExtreme Team Blog
14 June 2019

One of the common scenarios in using a diagram control is creating an organization chart. In this "getting started" article we introduce the few steps needed to create one with our new jQuery Diagram control, save it, load it, configure the control, and so on.

jQuery Diagram: Creating OrgCharts Using our JavaScript Widget

The article also covers these topics:

  • Bind the OrgChart to a data source
  • Load OrgChart "entities" to a toolbox panel
  • Add custom shapes to an OrgChart
  • Save and Load an OrgChart's Layout
  • Configure Page Settings
  • Export an OrgChart

DevExpress Diagram Widget


Tell us what you think of the new Web Diagram widget and comment below or submit a support ticket via our Support Center.

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.
Alexander Krakhotko (Xafari team)
Alexander Krakhotko (Xafari team)

looks great!

connection nodes are always pink, ignores the selected theme

17 June 2019
Siva Arum
Siva Arum

Great Web Diagram Tool!

Will there be any possibility to construct the tree diagram from the Tree data from database? For Example, Constructing Tree diagram very dynamically with positions for Assembly parts (Recursive material parts) or Supervisory hierarchy (Employee - Manager hierarchy in the organization).  


17 June 2019
Vladimir Frizen (DevExpress)
Vladimir Frizen (DevExpress)


Please refer to the following demo that shows data binding to a hierarchical data source:

Feel free to contact me if you have any other questions.

18 June 2019
Siva Arum
Siva Arum

Amazing :-). Thanks. Let me explore it further.

19 June 2019

Please login or register to post comments.