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

Demo

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

4 comment(s)
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).  

Thanks.

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

Hi,

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

js.devexpress.com/.../Light

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.