All docs
V19.1
24.2
The page you are viewing does not exist in version 24.2.
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

JavaScript/jQuery Diagram - edges

An array of diagram edges.

Type:

Object

Default Value: null

Use the edges option to populate an array of diagram edges.

View Demo

jQuery
JavaScript
$(function() {
    $("#diagram").dxDiagram({
        nodes: {
            dataSource: orgItems
        },
        edges: {
            dataSource: orgLinks
        },
        layout: "tree"
    });
});

dataSource

Binds the edges collection to the specified data.

Default Value: null

The Diagram widget creates a connector between two shapes for every edge in the collection.

fromExpr

Specifies the data field that provides an edge's start node key.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: 'from'

keyExpr

Specifies the data field that provides a key for an edge.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: 'id'

toExpr

Specifies the data field that provides an edge's end node key.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: 'to'