Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Your search did not match any results.


This demo shows the Diagram widget'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, just drop it into a container.

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