Diagram - Advanced Data Binding

The Diagram component accepts functions as expression property values. It allows you to implement custom logic when you bind a diagram to a data source.

In this demo, the nodes and edges collections are bound to a data source. Custom functions are used to get different shape types and font styles for items based on additional data source information.

The autoLayout property specifies an auto-layout algorithm type and orientation that the component uses to build diagrams.

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 DevExtreme.MVC.Demos.Models.SampleData.OrgData @(Html.DevExtreme().Diagram() .ID("diagram") .Nodes(ns => ns .DataSource(d => d .Array() .Key("ID") .Data(Model.Items) ) .KeyExpr("ID") .TextExpr("Name") .TypeExpr(new JS("itemTypeExpr")) .WidthExpr(new JS("itemWidthExpr")) .HeightExpr(new JS("itemHeightExpr")) .TextStyleExpr(new JS("itemTextStyleExpr")) .StyleExpr(new JS("itemStyleExpr")) .AutoLayout(al => al .Type(DiagramDataLayoutType.Tree) .Orientation(DiagramDataLayoutOrientation.Horizontal) ) ) .Edges(ns => ns .DataSource(d => d .Array() .Key("ID") .Data(Model.Links) ) .KeyExpr("ID") .FromExpr("From") .ToExpr("To") .StyleExpr(new JS("linkStyleExpr")) .FromLineEndExpr(new JS("linkFromLineEndExpr")) .ToLineEndExpr(new JS("linkToLineEndExpr")) ) .Toolbox(t => t .Groups(g => g .Add().Category(DiagramShapeCategory.General).Title("General") ) ) ) <script type="text/javascript"> function itemTypeExpr(obj, value) { if(value) obj.Type = (value === "rectangle") ? undefined : "group"; else return obj.Type === "group" ? "ellipse" : "rectangle"; } function itemWidthExpr(obj, value) { if(value) obj.Width = value; else return obj.Width || (obj.Type === "group" && 1.5) || 1; } function itemHeightExpr(obj, value) { if(value) obj.Height = value; else return obj.Height || (obj.Type === "group" && 1) || 0.75; } function itemTextStyleExpr(obj) { if(obj.Level === "senior") return { "font-weight": "bold", "text-decoration": "underline" }; return {}; } function itemStyleExpr(obj) { let style = { "stroke": "#444444" }; if(obj.Type === "group") style["fill"] = "#f3f3f3"; return style; } function linkStyleExpr(obj) { return { "stroke": "#444444" }; } function linkFromLineEndExpr(obj) { return "none"; } function linkToLineEndExpr(obj) { return "none"; } </script>

using System.Web.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; namespace DevExtreme.MVC.Demos.Controllers { public class DiagramController : Controller { public ActionResult AdvancedDataBinding() { return View(new OrgData { Items = SampleData.OrgItemsAdvanced, Links = SampleData.OrgLinksAdvanced }); } } }

#diagram { height: 900px; }