JavaScript/jQuery Diagram - edges

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

Type:

Object

Default Value: null

View Demo

dataSource

Binds the edges collection to the specified data. Specify this property if you use node and edge data sources.

Type:

Array<Object>

|

DataSource

|

DataSource Configuration

Default Value: null

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

fromExpr

Specifies the name of a data source field or an expression that provides an edge's start node key.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: 'from'

Specify this property if you use node and edge) data sources.

View Demo

index.js
data.js
$(function() {
    $("#diagram").dxDiagram({
        nodes: {
            dataSource: orgItems
        },
        edges: {
            dataSource: orgLinks,
            fromExpr: "from",
            toExpr: "to"
        },
    });
});
var orgItems = [
    {  
        "id":"106",
        "text":"Development",
        "type":2
    },
    {  
        "id":"108",
        "text":"WPF\nTeam",
        "type":2
    },
    {  
        "id":"109",
        "text":"Javascript\nTeam",
        "type":2
    },
    // ...
];

var orgLinks = [  
    {  
        "id":"124",
        "from":"106",
        "to":"108",
    },
    {  
        "id":"125",
        "from":"106",
        "to":"109",
    },
    // ...
];

fromLineEndExpr

Specifies the name of a data source field or an expression that provides an edge's line start tip.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: undefined

The specified field or expression should return none, arrow, filledTriangle, or outlinedTriangle.

index.js
$(function() {
    $("#diagram").dxDiagram({
        nodes: {
            dataSource: new DevExpress.data.ArrayStore({
                key: "this",
                data: orgItems
            }),
            textExpr: "name",
        },
        edges: {
            dataSource: new DevExpress.data.ArrayStore({
                key: "this",
                data: orgLinks
            }),
            fromLineEndExpr: linkFromLineEndExpr,
            toLineEndExpr: linkToLineEndExpr
        },
    });
    function linkFromLineEndExpr(obj) {
        return "none";
    }
    function linkToLineEndExpr(obj) {
        return "none";
    }
});

fromPointIndexExpr

Specifies the name of a data source field or an expression that provides an index of a shape connection point where an edge starts.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: undefined

The built-in shape's connection points are numbered clockwise from the leftmost point on the top border.

Diagram - Shape Points

A custom shape's connection points are numbered according to their position in the connectionPoints collection.

keyExpr

Specifies the name of a data source field or an expression that provides edge keys.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: 'id'

This property is required if you bind edges to a data source (edges.dataSource).

lineTypeExpr

Specifies the name of a data source field or an expression that provides an edge's line type.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: undefined

The specified field or expression should return orthogonal or straight.

Diagram - Line Types

lockedExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current edge'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.

pointsExpr

Specifies the name of a data source field or an expression that provides an edge's key points.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: undefined
index.js
data.js
$(function() {
    $("#diagram").dxDiagram({
        nodes: {...},
        edges: {
            dataSource: new DevExpress.data.ArrayStore({
                key: "this",
                data: orgLinks
            }),
            pointsExpr: "points",
        },
    });
});
var orgLinks = [  
    {  
        id: "1",
        from: "101",
        to: "102",
        points: [{x:1.5,y:1.125},{x:1.75,y:0.875},{x:2.5,y:0.875}],
    },
    //...
];
NOTE

  • Predefined edge points are ignored if the autoLayout.type property is set to layered or tree.

  • If an edge is connected to nodes, the UI component calculates coordinates of connection points and the first and last points specified in a data source are ignored.

styleExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: undefined

A data source field specified by this property should 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, for instance {"fill": "#d9d9d9", "stroke": "#999999"}

View Demo

textExpr

Specifies the name of a data source field or an expression that provides edge texts.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: undefined

The specified data source field or an expression should return a string or object value.

  • A string specifies the text displayed in the middle of a connector. Example: "text".
  • An object can contain multiple texts and their positions on the connector. The position is a number from 0 to 1, where 0 corresponds to the connector's start point and 1 to the connector's end point. Example: { 0.3: "text1", 0.8: "text2" }.

textStyleExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

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 presented in JSON format as well, for instance { "font-weight": "bold", "text-decoration": "underline" }.

View Demo

toExpr

Specifies the name of a data source field or an expression that provides an edge's end node key.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: 'to'

Specify this property if you use (node and edge) data sources.

View Demo

index.js
data.js
$(function() {
    $("#diagram").dxDiagram({
        nodes: {
            dataSource: orgItems
        },
        edges: {
            dataSource: orgLinks,
            fromExpr: "from",
            toExpr: "to"
        },
    });
});
var orgItems = [
    {  
        "id":"106",
        "text":"Development",
        "type":2
    },
    {  
        "id":"108",
        "text":"WPF\nTeam",
        "type":2
    },
    {  
        "id":"109",
        "text":"Javascript\nTeam",
        "type":2
    },
    // ...
];

var orgLinks = [  
    {  
        "id":"124",
        "from":"106",
        "to":"108",
    },
    {  
        "id":"125",
        "from":"106",
        "to":"109",
    },
    // ...
];

toLineEndExpr

Specifies the name of a data source field or an expression that provides an edge's line end tip.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: undefined

The specified field or expression should return none, arrow, filledTriangle, or outlinedTriangle.

index.js
$(function() {
    $("#diagram").dxDiagram({
        nodes: {
            dataSource: new DevExpress.data.ArrayStore({
                key: "this",
                data: orgItems
            }),
            textExpr: "name",
        },
        edges: {
            dataSource: new DevExpress.data.ArrayStore({
                key: "this",
                data: orgLinks
            }),
            fromLineEndExpr: linkFromLineEndExpr,
            toLineEndExpr: linkToLineEndExpr
        },
    });
    function linkFromLineEndExpr(obj) {
        return "none";
    }
    function linkToLineEndExpr(obj) {
        return "none";
    }
});

toPointIndexExpr

Specifies the name of a data source field or an expression that provides an index of a shape connection point where an edge ends.

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: undefined

The built-in shape's connection points are numbered clockwise from the leftmost point on the top border.

Diagram - Shape Points

A custom shape's connection points are numbered according to their position in the connectionPoints collection.

zIndexExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current edge's data object.

Default Value: undefined

The z-index specifies the edge stack order. An edge with greater stack order is in front of an edge with a lower stack order.