JavaScript/jQuery Diagram - edges

View Demo

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.

View Demo

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

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

View Demo

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

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

$(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";
    }
});

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

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

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

The specified field or expression should return orthogonal or straight.

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.

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

View Demo

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

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

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

View Demo

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

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

$(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";
    }
});

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

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

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.