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