Your search did not match any results.

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.

Fluent
Generic
ThemeBuilder
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("~/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; }