Your search did not match any results.
Diagram

Text Style

Note that the Diagram widget is in the community technology preview (CTP) development stage.

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