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.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

@(Html.DevExtreme().Diagram() .ID("diagram") .Toolbox(t => t .Groups(g => { g.Add().Category(DiagramShapeCategory.General).Title("General"); g.Add().Category(DiagramShapeCategory.Containers).Title("Containers").Expanded(true); }) ) ) <script type="text/javascript"> $(function () { $.ajax({ url: "@Url.Content("~/SampleData/diagram-structure.json")", dataType: "text", success: function(data) { $("#diagram").dxDiagram("instance").import(data); } }); }); </script>

using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class DiagramController : Controller { public IActionResult Containers() { return View(); } } }

#diagram { height: 725px; }