Data Visualization ▸ 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.

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