nodes

Allows you to bind the collection of diagram nodes to a data source. For more information, see the Data Binding section.

Type:

Object

Default Value: null

autoLayout

Specifies an auto-layout algorithm that the UI component uses to build a diagram.

Type:

String

|

Object

Default Value: 'auto'
Accepted Values: 'auto' | 'off' | 'tree' | 'layered'

The layout property is in effect when a diagram is bound to a data source using the nodes property.

View Demo

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.

Type:

Boolean

Default Value: true

NOTE
If the widthExpr and heightExpr properties are specified, the autosize feature is disabled. The UI component displays shapes based on the provided sizes.

containerChildrenExpr

Specifies the name of a data source field or an expression that returns a container's nested items.

Type:

String

|

Function

Function parameters:
data: any

The current node's data object.

value: any

When the function is called as a setter, returns the container's nested items; when the function is called as a getter, returns undefined.

Return Value: any

A container's nested items.

Default Value: undefined

This property is in effect for "verticalContainer" or "horizontalContainer" nodes.

You can also use the containerKeyExpr property to provide a container's content.

index.js
data.js
$(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",
        }]
    }
];

Diagram - Container

containerKeyExpr

Specifies the name of a data source field or an expression that returns a key of a node's parent container node.

Type:

String

|

Function

Function parameters:
data: any

The current node's data object.

value: any

When the function is called as a setter, returns a key of the node's parent container node; when the function is called as a getter, returns undefined.

Return Value: any

A node's parent container node.

Default Value: 'containerKey'

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.

index.js
data.js
$(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"
    },
];

Diagram - Container

customDataExpr

Specifies the name of a data source field or an expression that returns a node's custom data.

Type:

String

|

Function

Function parameters:
data: any

The current node's data object.

value: any

When the function is called as a setter, returns the node's new custom data; when the function is called as a getter, returns undefined.

Return Value: any

A node's custom data.

Default Value: undefined

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.

JavaScript
// ...
customDataExpr(obj, value) {
    if (value === undefined) {
        return {
        Full_Name: obj.Full_Name,
        Prefix: obj.Prefix,
        Title: obj.Title,
        City: obj.City,
        State: obj.State,
        Email: obj.Email,
        Skype: obj.Skype,
        Mobile_Phone: obj.Mobile_Phone,
        };
    }
    obj.Full_Name = value.Full_Name;
    obj.Prefix = value.Prefix;
    obj.Title = value.Title;
    obj.City = value.City;
    obj.State = value.State;
    obj.Email = value.Email;
    obj.Skype = value.Skype;
    obj.Mobile_Phone = value.Mobile_Phone;
    return null;
},
// ...

View Demo

dataSource

Binds the nodes collection to the specified data. For more information, see the Data Binding section.

Default Value: null

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 returns a node's height.

Type:

String

|

Function

Function parameters:
data: any

The current node's data object.

value: any

When the function is called as a setter, returns the node's new height value; when the function is called as a getter, returns undefined.

Return Value: any

A node's height.

Default Value: undefined

The units property specifies the measurement unit.

imageUrlExpr

Specifies the name of a data source field or an expression that returns an image URL or Base64 encoded image for a node.

Type:

String

|

Function

Function parameters:
data: any

The current node's data object.

value: any

When the function is called as a setter, returns an image URL or Base64 encoded image for the node; when the function is called as a getter, returns undefined.

Return Value: any

An image URL or Base64 encoded image for a node.

Default Value: undefined

This property is in effect for nodes of the "cardWithImageOnLeft", "cardWithImageOnTop", or "cardWithImageOnRight" type.

index.js
data.js
    $(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",
    }
];

Diagram - Data Binding Options

itemsExpr

Specifies the name of a data source field or an expression that returns a node's child items.

Type:

String

|

Function

Function parameters:
data: any

The current node's data object.

value: any

When the function is called as a setter, returns the node's child items; when the function is called as a getter, returns undefined.

Return Value: any

A node's child items.

Default Value: undefined

Specify this property when your source data has a hierarchical structure.

View Demo

index.js
data.js
$(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 returns node keys.

Type:

String

|

Function

Function parameters:
data: any

The current node's data object.

value: any

When the function is called as a setter, returns the node's new key value; when the function is called as a getter, returns undefined.

Return Value: any

A node key.

Default Value: 'id'

leftExpr

Specifies the name of a data source field or an expression that returns the x-coordinate of a node's left border.

Type:

String

|

Function

Function parameters:
data: any

The current node's data object.

value: any

When the function is called as a setter, returns the x-coordinate of the node's left border; when the function is called as a getter, returns undefined.

Return Value: any

The x-coordinate of a node's left border.

Default Value: undefined

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.

NOTE
Predefined shape coordinates are ignored when the autoLayout.type property is set to layered or tree.

lockedExpr

Specifies the name of a data source field or an expression whose values indicate whether a node is locked.

Type:

String

|

Function

Function parameters:
data: any

The current node's data object.

value: any

When the function is called as a setter, returns whether the node is locked; when the function is called as a getter, returns undefined.

Return Value: any

A Boolean value that indicates whether a node is locked.

Default Value: undefined

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.

JavaScript
$(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 returns a parent node key for a node.

Type:

String

|

Function

Function parameters:
data: any

The current node's data object.

value: any

When the function is called as a setter, returns a parent node key for the node; when the function is called as a getter, returns undefined.

Return Value: any

A parent node key for a node.

Default Value: undefined

Specify this property if your source data has a linear structure.

View Demo

styleExpr

Specifies the name of a data source field or an expression that returns a node style.

Type:

String

|

Function

Function parameters:
data: any

The current node's data object.

value: any

When the function is called as a setter, returns the node's new style; when the function is called as a getter, returns undefined.

Return Value: any

A node style.

Default Value: undefined

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.

index.js
$(function() {
    $("#diagram").dxDiagram({
        nodes: {
            styleExpr: itemStyleExpr,
        //...
    });

    function itemStyleExpr(obj) {
        let style = { "stroke": "#444444" };
        if(obj.type === "group")
            style["fill"] = "#f3f3f3";
        return style;
    }
});

View Demo

textExpr

Specifies the name of a data source field or an expression that returns node texts.

Type:

String

|

Function

Function parameters:
data: any

The current node's data object.

value: any

When the function is called as a setter, returns the node's new text value; when the function is called as a getter, returns undefined.

Return Value: any

A node text.

Default Value: 'text'

textStyleExpr

Specifies the name of a data source field or an expression that returns a node's text style.

Type:

String

|

Function

Function parameters:
data: any

The current node's data object.

value: any

When the function is called as a setter, returns the node's new text style; when the function is called as a getter, returns undefined.

Return Value: any

A node's text style.

Default Value: undefined

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.

index.js
$(function() {
    $("#diagram").dxDiagram({
        nodes: {
            textStyleExpr: itemTextStyleExpr,
        //...
    });

    function itemTextStyleExpr(obj) {
        let style = { "font-weight": "bold" };
        if(obj.level === "senior")
            style["text-decoration"] = "underline";
        return style;
    }
});

View Demo

topExpr

Specifies the name of a data source field or an expression that returns the y-coordinate of a node's top border.

Type:

String

|

Function

Function parameters:
data: any

The current node's data object.

value: any

When the function is called as a setter, returns the y-coordinate of the node's top border; when the function is called as a getter, returns undefined.

Return Value: any

The y-coordinate of a node's top border.

Default Value: undefined

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.

NOTE
Predefined shape coordinates are ignored when the autoLayout.type property is set to layered or tree.

typeExpr

Specifies the name of a data source field or an expression that returns the shape type for a node.

Type:

String

|

Function

Function parameters:
data: any

The current node's data object.

value: any

When the function is called as a setter, returns the node's new shape type; when the function is called as a getter, returns undefined.

Return Value: any

The shape type for a node.

Default Value: 'type'

The built-in shape types are shown in the Shape Types section.

JavaScript
$(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 returns a node's width.

Type:

String

|

Function

Function parameters:
data: any

The current node's data object.

value: any

When the function is called as a setter, returns the node's new width value; when the function is called as a getter, returns undefined.

Return Value: any

A node's width.

Default Value: undefined

The units property specifies the measurement unit.

zIndexExpr

Specifies the name of a data source field or an expression that returns a node's z-index.

Type:

String

|

Function

Function parameters:
data: any

The current node's data object.

value: any

When the function is called as a setter, returns the node's new z-index value; when the function is called as a getter, returns undefined.

Return Value: any

A node's z-index.

Default Value: undefined

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.