DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Diagram - Containers

This demo shows the Diagram component's capability to wrap shapes into containers. A container is a special shape with the following features:

  • A container can contain other shapes (including other containers).
  • A container is dragged with its content.
  • A container can be collapsed with a collapse button.

To wrap a shape, drop it into a container.

If you bind the Diagram to a data source, define the containerKeyExpr property to store information about the parent container in the data source. Otherwise, this information will be lost.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API