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.

See more Hide details

Prev Demo Next Demo

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.

Send Feedback

Thank you!
We appreciate your 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("~/Content/SampleData/diagram-structure.json")", dataType: "text", success: function(data) { $("#diagram").dxDiagram("instance").import(data); } }); }); </script>

using System.Web.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; namespace DevExtreme.MVC.Demos.Controllers { public class DiagramController : Controller { public ActionResult Containers() { return View(); } } }

#diagram { height: 725px; }