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