All docs
V20.1
20.2
20.1
19.2
19.1
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.
Box
Map
Vue

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 widget uses to build a diagram.

Type:

String

|

Object

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

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

View Demo

containerChildrenExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: 'children'

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

You can also use the containerKeyExpr option 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",
        "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 provides a key of a node's parent container node.

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: undefined

The parent container node must be of the "verticalContainer" or "horizontalContainer" type.

You can also use the containerChildrenExpr option 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

dataSource

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

Type: Array<Object> |

DataSource

|

DataSource Configuration

Default Value: null

The Diagram widget 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.

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: undefined

The units option 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.

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: undefined

This option 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 provides a node's child items.

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: undefined

Specify this option 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 provides node keys.

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: 'id'

leftExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

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 option 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:

Object

The current node's data object.

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 provides a parent node key for a node.

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: undefined

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

View Demo

styleExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: undefined

A data source field specified by this option must contain inline style declarations in string format, for instance "fill: #d9d9d9; stroke: #999999".

If you provide a function for the styleExpr option, 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 provides node texts.

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: 'text'

textStyleExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: undefined

A data source field specified by this option must contain inline style declarations in string format, for instance "font-weight: bold; text-decoration: underline".

If you provide a function for the textStyleExpr option, 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 provides the y-coordinate of a node's top border.

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

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 option is set to layered or tree.

typeExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

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 provides a node's width.

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: undefined

The units option specifies the measurement unit.

zIndexExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

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.