Advanced Data Binding
Documentation
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.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
$(function() {
$("#diagram").dxDiagram({
nodes: {
dataSource: new DevExpress.data.ArrayStore({
key: "id",
data: orgItems
}),
typeExpr: itemTypeExpr,
textExpr: "name",
widthExpr: itemWidthExpr,
heightExpr: itemHeightExpr,
textStyleExpr: itemTextStyleExpr,
styleExpr: itemStyleExpr,
autoLayout: {
type: "tree",
orientation: "horizontal"
}
},
edges: {
dataSource: new DevExpress.data.ArrayStore({
key: "id",
data: orgLinks
}),
styleExpr: linkStyleExpr,
fromLineEndExpr: linkFromLineEndExpr,
toLineEndExpr: linkToLineEndExpr
},
toolbox: {
groups: [ "general" ]
}
});
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";
}
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/21.1.4/js/dx-diagram.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.4/css/dx.light.css" />
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/21.1.4/css/dx-diagram.css" />
<script src="https://cdn3.devexpress.com/jslib/21.1.4/js/dx.all.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="data.js"></script>
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="diagram">
</div>
</div>
</body>
</html>
#diagram {
height: 900px;
}
var orgItems = [
{
"id":"106",
"name":"Development",
"type":"group"
},
{
"id":"107",
"name":"WinForms\nTeam",
"type": "group"
},
{
"id":"108",
"name":"WPF\nTeam",
"type": "group"
},
{
"id":"109",
"name":"Javascript\nTeam",
"type": "group"
},
{
"id":"110",
"name":"ASP.NET\nTeam",
"type": "group"
},
{
"id":"112",
"name": "Ana\nTrujillo",
"level": "senior"
},
{
"id":"113",
"name":"Antonio\nMoreno"
},
{
"id":"115",
"name":"Christina\nBerglund"
},
{
"id":"116",
"name":"Hanna\nMoos"
},
{
"id":"119",
"name":"Laurence\nLebihan"
},
{
"id":"120",
"name": "Elizabeth\nLincoln",
"level": "senior"
},
{
"id":"122",
"name": "Patricio\nSimpson",
"level": "senior"
},
{
"id":"123",
"name":"Francisco\nChang"
}
];
var orgLinks = [
{
"id":"124",
"from":"106",
"to":"108",
},
{
"id":"125",
"from":"106",
"to":"109",
},
{
"id":"126",
"from":"106",
"to":"107",
},
{
"id":"127",
"from":"106",
"to":"110",
},
{
"id":"129",
"from":"110",
"to":"112",
},
{
"id":"130",
"from":"110",
"to":"113",
},
{
"id":"132",
"from":"107",
"to":"115",
},
{
"id":"133",
"from":"107",
"to":"116",
},
{
"id":"136",
"from":"108",
"to":"119",
},
{
"id":"137",
"from":"108",
"to":"120",
},
{
"id":"139",
"from":"109",
"to":"122",
},
{
"id":"140",
"from":"109",
"to":"123",
}
];