Your search did not match any results.

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 method 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.

Backend API
@model IEnumerable<DevExtreme.NETCore.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("~/SampleData/diagram-employees.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 CustomShapesWithTexts() { return View(SampleData.OrgItemsPlain); } } }
#diagram { height: 725px; }