Your search did not match any results.


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.

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; }