Diagram - Shapes with Base Type

The Diagram component allows you to bind a customShapes collection to a data source. In this demo, the collection is bound to an array of employee objects. The Diagram creates a shape for every employee data item in the data source and adds the shapes to the "employees" category.

The toolbox property allows you to add custom categories to a data toolbox.

Users can drag data items from the toolbox and drop them onto a canvas to create a diagram.

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.

Thank you for the feedback!

Backend API

@model IEnumerable<DevExtreme.MVC.Demos.Models.OrgItemPlain> @(Html.DevExtreme().Diagram() .ID("diagram") .CustomShapes(cs => { foreach(var employee in Model) { cs.Add().Category("employees").Type("employee" + employee.ID).BaseType("rectangle").DefaultText(employee.FullName).AllowEditText(false); } }) .Toolbox(tb => tb .Groups(g => g.Add().Category("employees").Title("Employees").DisplayMode(DiagramToolboxDisplayMode.Texts)) ) ) <script type="text/javascript"> $(function() { $.ajax({ url: "@Url.Content("~/Content/SampleData/diagram-employees.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 CustomShapesWithTexts() { return View(SampleData.OrgItemsPlain); } } }

#diagram { height: 725px; }