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

Shapes with Base Type


The Diagram widget 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 option 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.

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