React Diagram - edges

Default Value: null

customDataExpr

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

Type:

|

Function parameters:

data:

The current edge's data object.

Default Value: undefined

This property links custom data from a data source to the diagram edge. The edge 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 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:

|

Function parameters:

data:

The current edge's data object.

Default Value: 'from'

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

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:

|

Function parameters:

data:

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:

|

Function parameters:

data:

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:

|

Function parameters:

data:

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:

|

Function parameters:

data:

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:

|

Function parameters:

data:

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:

|

Function parameters:

data:

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:

|

Function parameters:

data:

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 "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 {"stroke": "#999999"}

textExpr

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

Type:

|

Function parameters:

data:

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:

|

Function parameters:

data:

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" }.

toExpr

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

Type:

|

Function parameters:

data:

The current edge's data object.

Default Value: 'to'

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

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:

|

Function parameters:

data:

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:

|

Function parameters:

data:

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:

|

Function parameters:

data: