JavaScript/jQuery Diagram - nodes
Allows you to bind the collection of diagram nodes to a data source. For more information, see the Data Binding section.
autoLayout
Specifies an auto-layout algorithm that the UI component uses to build a diagram.
The layout property is in effect when a diagram is bound to a data source using the nodes property.
See Also
autoSizeEnabled
Specifies whether or not a shape size is automatically changed to fit the text when the UI component is bound to a data source.
containerChildrenExpr
Specifies the name of a data source field or an expression that provides a container's nested items.
The current node's data object.
This property is in effect for "verticalContainer"
or "horizontalContainer"
nodes.
You can also use the containerKeyExpr property to provide a container's content.
$(function() { $("#diagram").dxDiagram({ nodes: { dataSource: new DevExpress.data.ArrayStore({ key: "this", data: orgItems }), keyExpr: "id", parentKeyExpr: "parent_id", containerChildrenExpr: "children", }, }); });
var orgItems = [ { "id":"106", "text":"Development", "type":"ellipse" }, { "id":"110", "text":"ASP.NET Team", "type": "horizontalContainer", "parent_id": "106", "children": [ { "id":"112", "text":"Ana\nTrujillo", "type":"rectangle", }, { "id":"113", "text":"Antonio\nMoreno", "type":"rectangle", }] } ];
containerKeyExpr
Specifies the name of a data source field or an expression that provides a key of a node's parent container node.
The current node's data object.
The parent container node must be of the "verticalContainer"
or "horizontalContainer"
type.
You can also use the containerChildrenExpr property to provide a container's content.
$(function() { $("#diagram").dxDiagram({ nodes: { dataSource: new DevExpress.data.ArrayStore({ key: "this", data: orgItems }), keyExpr: "id", parentKeyExpr: "parent_id", containerKeyExpr: "team", }, }); });
var orgItems = [ { "id":"106", "text":"Development", "type":"ellipse" }, { "id":"110", "text":"ASP.NET Team", "type": "horizontalContainer", "parent_id": "106", }, { "id":"112", "text":"Ana\nTrujillo", "type":"rectangle", "team": "110" }, { "id":"113", "text":"Antonio\nMoreno", "type":"rectangle", "team": "110" }, ];
customDataExpr
Specifies the name of a data source field or an expression that provides a node's custom data.
The current node's data object.
This property links custom data from a data source to a diagram node. The node contains the linked data copied from the data source. Changes in the data are reflected in the diagram history. You can use the UI to undo and redo these changes.
dataSource
Binds the nodes collection to the specified data. For more information, see the Data Binding section.
The Diagram UI component creates a shape for every node in the collection.
heightExpr
Specifies the name of a data source field or an expression that provides a node's height.
The current node's data object.
The units property specifies the measurement unit.
imageUrlExpr
Specifies the name of a data source field or expression that provides an image URL or Base64 encoded image for a node.
The current node's data object.
This property is in effect for nodes of the "cardWithImageOnLeft"
, "cardWithImageOnTop"
, or "cardWithImageOnRight"
type.
$(function() { $("#diagram").dxDiagram({ nodes: { dataSource: new DevExpress.data.ArrayStore({ key: "this", data: orgItems }), imageUrlExpr: "picture", }, edges: { dataSource: new DevExpress.data.ArrayStore({ key: "this", data: orgLinks }) }, }); });
var orgItems = [ { "id":"110", "text":"ASP.NET\nTeam", "type": "ellipse" }, { "id":"112", "text":"Ken Samuelson", "type": "cardWithImageOnLeft", "picture": "images/employees/32.png" }, { "id":"113", "text":"Terry Bradley", "type": "cardWithImageOnLeft", "picture": "images/employees/33.png" }, ]; var orgLinks = [ { "id":"129", "from":"110", "to":"112", }, { "id":"130", "from":"110", "to":"113", } ];
itemsExpr
Specifies the name of a data source field or an expression that provides a node's child items.
The current node's data object.
Specify this property when your source data has a hierarchical structure.
$(function() { $("#diagram").dxDiagram({ nodes: { dataSource: new DevExpress.data.ArrayStore({ key: "this", data: employees }), textExpr: "Title", itemsExpr: "Items" }, }); });
var employees = [{ "Full_Name": "John Heart", "Title": "CEO", "Items": [{ "Full_Name": "Arthur Miller", "Title": "CTO", "Items": [{ "Full_Name": "Brett Wade", "Title": "IT Manager", }, { "Full_Name": "Barb Banks", "Title": "Support Manager", }] }, { "Full_Name": "Robert Reagan", "Title": "CMO", "Items": [{ "Full_Name": "Ed Holmes", "Title": "Sales Manager", }] }] }];
keyExpr
Specifies the name of a data source field or an expression that provides node keys.
The current node's data object.
leftExpr
Specifies the name of a data source field or an expression that provides the x-coordinate of a node's left border.
The current node's data object.
A node's x-coordinate specifies the distance between the left border of a diagram work area and the left border of a shape, in units.
lockedExpr
Specifies the name of a data source field or an expression whose values indicate whether a node is locked.
The current node's data object.
A locked item can not be moved, changed, or delete. Users can use the context menu to lock and unlock an item.
The specified field or expression should return true
or false
.
$(function() { $("#diagram").dxDiagram({ nodes: { dataSource: new DevExpress.data.ArrayStore({ key: "this", data: orgItems }), textExpr: "Title", parentKeyExpr: "Head_ID", lockedExpr: itemLockedExpr, }, }); function itemLockedExpr(obj, value) { return obj.type === "group" ? "true" : "false"; } });
parentKeyExpr
Specifies the name of a data source field or an expression that provides a parent node key for a node.
The current node's data object.
Specify this property if your source data has a linear structure.
styleExpr
Specifies the name of a data source field or an expression that provides a node style.
The current node's data object.
A data source field specified by this property must contain inline style declarations in string format, for instance "fill: #d9d9d9; stroke: #999999"
.
If you provide a function for the styleExpr property, the function can return style settings as CSS rules presented in JSON format as well.
$(function() { $("#diagram").dxDiagram({ nodes: { styleExpr: itemStyleExpr, //... }); function itemStyleExpr(obj) { let style = { "stroke": "#444444" }; if(obj.type === "group") style["fill"] = "#f3f3f3"; return style; } });
textExpr
Specifies the name of a data source field or an expression that provides node texts.
The current node's data object.
textStyleExpr
Specifies the name of a data source field or an expression that provides a node's text style.
The current node's data object.
A data source field specified by this property must contain inline style declarations in string format, for instance "font-weight: bold; text-decoration: underline"
.
If you provide a function for the textStyleExpr property, the function can return style settings as CSS rules in JSON format.
$(function() { $("#diagram").dxDiagram({ nodes: { textStyleExpr: itemTextStyleExpr, //... }); function itemTextStyleExpr(obj) { let style = { "font-weight": "bold" }; if(obj.level === "senior") style["text-decoration"] = "underline"; return style; } });
topExpr
Specifies the name of a data source field or an expression that provides the y-coordinate of a node's top border.
The current node's data object.
A node's y-coordinate specifies the distance between the top border of a diagram work area and the top border of a shape, in units.
typeExpr
Specifies the name of a data source field or an expression that provides the shape type for a node.
The current node's data object.
The built-in shape types are shown in the Shape Types section.
$(function() { $("#diagram").dxDiagram({ nodes: { typeExpr: itemTypeExpr, ... }, }); function itemTypeExpr(obj, value) { if(value) obj.type = (value === "rectangle") ? undefined : "group"; else return obj.type === "group" ? "ellipse" : "rectangle"; } });
widthExpr
Specifies the name of a data source field or an expression that provides a node's width.
The current node's data object.
The units property specifies the measurement unit.
zIndexExpr
Specifies the name of a data source field or an expression that provides a node's z-index.
The current node's data object.
The z-index specifies the node stack order. A node with greater stack order is in front of a node with a lower stack order.
If you have technical questions, please create a support ticket in the DevExpress Support Center.