Vue Diagram - edges

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

Selector: DxEdges
Type:

Object

Default Value: null

customDataExpr

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

Selector: custom-data-expr
Type:

String

|

Function

Function parameters:
data: any

The current edge's data object.

value: any

An edge's new custom data or undefined.

Return Value: any

An edge's custom data.

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.

A function assigned to this property should do the following:

  • Return an edge's new custom data when the value parameter is set to undefined.
  • Save a new custom data value to a data storage when the value parameter contains an edge's custom data. For instance, assign this value to the obj parameter's field to save an edge's custom data in your data source.
jQuery
index.js
data.js
$(() => {
    $('#diagram').dxDiagram({
        edges: {
            dataSource: new DevExpress.data.ArrayStore({
                key: 'id',
                data: orgLinks,
            }),
            customDataExpr(obj, value) {
                if (value === undefined)
                    return {
                        myCustomField: obj.myCustomField,
                    };
                obj.myCustomField = value.myCustomField;
                return null;
            },
            // ...
    });
});
const orgLinks = [
    {
        id: '124',
        from: '106',
        to: '108',
        myCustomField: 'customValue',
    }, 
    {
        id: '125',
        from: '106',
        to: '109',
    },
    // ... 
];
Angular
app.component.html
app.module.ts
app.service.ts
<dx-diagram #diagram id="diagram">
    <dxo-edges
        [dataSource]="orgLinksDataSource"
        [customDataExpr]="linkCustomDataExpr"
    ></dxo-edges>
</dx-diagram>
import { DxDiagramModule, DxDiagramComponent } from 'devextreme-angular';
import ArrayStore from 'devextreme/data/array_store';
import { Service } from './app.service';

@Component({
    selector: 'app-root',
    templateUrl: 'app/app.component.html',
    styleUrls: ['app/app.component.css'],
    providers: [Service],
})

export class AppComponent {
    orgLinksDataSource: ArrayStore;

    constructor(service: Service) {
        this.orgLinksDataSource = new ArrayStore({
            key: 'ID',
            data: service.getOrgLinks(),
        });
    }

    linkCustomDataExpr(obj, value) {
        if (value === undefined)
            return {
                MyCustomField: obj.MyCustomField,
            };
        obj.MyCustomField = value.MyCustomField;
        return null;
    }
}
import { Injectable } from '@angular/core';

export class OrgLink {
    ID: string;
    From: string;
    To: string;
    MyCustomField: string;
}

const orgLinks: OrgLink[] = [
    {
        ID: '124',
        From: '106',
        To: '108',
        MyCustomField: 'customValue',
    }, 
    {
        ID: '125',
        From: '106',
        To: '109',
    },
    // ...
];

@Injectable()
export class Service {
    getOrgLinks() {
        return orgLinks;
    }
}
Vue
App.vue
data.js
<template>
    <DxDiagram
        id="diagram"
        ref="diagram"
    >
        <DxEdges
            :data-source="orgLinksDataSource"
            :custom-data-expr="linkCustomDataExpr"
        />
    </DxDiagram>
</template>
<script>
    import {
        DxDiagram, DxNodes,
    } from 'devextreme-vue/diagram';
    import ArrayStore from 'devextreme/data/array_store';
    import service from './data.js';
    export default {
        components: {
            DxDiagram, DxNodes
        },
        data() {
            return {
                orgLinksDataSource: new ArrayStore({
                    key: 'id',
                    data: service.getOrgLinks(),
                }),
            };
        },
        methods: {
            linkCustomDataExpr(obj, value) {
                if (value === undefined)
                    return {
                        myCustomField: obj.myCustomField,
                    };
                obj.myCustomField = value.myCustomField;
                return null;
            },
        },
    };
</script>
const orgLinks = [
    {
        id: '124',
        from: '106',
        to: '108',
        myCustomField: 'customValue',
    },
    {
        id: '125',
        from: '106',
        to: '109',
    },
    // ...
];

export default {
    getOrgLinks() {
        return orgLinks;
    },
};
React
App.js
data.js
import React from 'react';
import Diagram, { Nodes } from 'devextreme-react/diagram';
import ArrayStore from 'devextreme/data/array_store';
import service from './data.js';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.orgLinksDataSource = new ArrayStore({
            key: 'id',
            data: service.getOrgLinks(),
        });
    }

    render() {
        return (
        <Diagram id="diagram">
            <Edges 
                dataSource={this.orgLinksDataSource}
                customDataExpr={this.linkCustomDataExpr} 
            />
        </Diagram>
        );
    }

    linkCustomDataExpr(obj, value) {
        if (value === undefined)
            return {
                myCustomField: obj.myCustomField,
            };
        obj.myCustomField = value.myCustomField;
        return null;
    }

}
export default App;
const orgLinks = [
    {
        id: '124',
        from: '106',
        to: '108',
        myCustomField: 'customValue',
    }, 
    {
        id: '125',
        from: '106',
        to: '109',
    },
    // ...
];

export default {
    getOrgLinks() {
        return orgLinks;
    },
};

dataSource

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

Selector: data-source
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 returns an edge's start node key.

Selector: from-expr
Type:

String

|

Function

Function parameters:
data: any

The current edge's data object.

value: any

An edge's new start node key or undefined.

Return Value: any

An edge's start node key.

Default Value: 'from'

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

A function assigned to this property should do the following:

  • Return an edge's new start node key when the value parameter is set to undefined.
  • Save a new key value to a data storage when the value parameter contains an edge's start node key. For instance, assign this value to the obj parameter's field to save an edge's start node key in your data source.

View Demo

jQuery
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 returns an edge's line start tip.

Selector: from-line-end-expr
Type:

String

|

Function

Function parameters:
data: any

The current edge's data object.

value: any

An edge's new line start tip or undefined.

Return Value: any

An edge's line start tip.

Default Value: undefined

A function assigned to this property should do the following:

  • Return an edge's new line start tip when the value parameter is set to undefined.
  • Save a new line start tip value to a data storage when the value parameter contains an edge's line start tip. For instance, assign this value to the obj parameter's field to save an edge's line start tip in your data source.

A start line tip accepts one of the following values:

  • none
  • arrow
  • filledTriangle
  • outlinedTriangle
jQuery
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 returns an index of a shape connection point where an edge starts.

Selector: from-point-index-expr
Type:

String

|

Function

Function parameters:
data: any

The current edge's data object.

value: any

An index of a shape connection point where an edge starts or undefined.

Return Value: any

An index of a shape connection point where an edge starts.

Default Value: undefined

A function assigned to this property should do the following:

  • Return an index of a shape connection point where an edge starts when the value parameter is set to undefined.
  • Save an index value to a data storage when the value parameter contains a shape connection point's index. For instance, assign this value to the obj parameter's field to save an index of a shape connection point where an edge starts in your data source.

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 returns an edge's key.

Selector: key-expr
Type:

String

|

Function

Function parameters:
data: any

The current edge's data object.

value: any

An edge's new key or undefined.

Return Value: any

An edge key.

Default Value: 'id'

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

A function assigned to this property should do the following:

  • Return an edge's new key when the value parameter is set to undefined.
  • Save a new key value to a data storage when the value parameter contains an edge's key. For instance, assign this value to the obj parameter's field to save an edge's key in your data source.

lineTypeExpr

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

Selector: line-type-expr
Type:

String

|

Function

Function parameters:
data: any

The current edge's data object.

value: any

An edge's new line type or undefined.

Return Value: any

An edge's line type (orthogonal or straight).

Default Value: undefined

A function assigned to this property should do the following:

  • Return an edge's new line type when the value parameter is set to undefined.
  • Save a new line type value to a data storage when the value parameter contains an edge's line type. For instance, assign this value to the obj parameter's field to save an edge's line type in your data source.

A line type can accept the orthogonal or straight value.

Diagram - Line Types

lockedExpr

Specifies the name of a data source field or an expression whose Boolean value indicates whether an edge is locked.

Selector: locked-expr
Type:

String

|

Function

Function parameters:
data: any

The current edge's data object.

value: any

A Boolean value that indicates whether an edge is locked or undefined.

Return Value: any

A Boolean value that indicates whether an edge is locked.

Default Value: undefined

A function assigned to this property should do the following:

  • Return a Boolean value that indicates whether an edge is locked when the value parameter is set to undefined.
  • Save a new value to a data storage when the value parameter contains a Boolean value. For instance, assign this value to the obj parameter's field to save a value that indicates whether an edge is locked in your data source.

A locked item can not be moved, changed, or deleted. The context menu allows users to lock and unlock an item.

pointsExpr

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

Selector: points-expr
Type:

String

|

Function

Function parameters:
data: any

The current edge's data object.

value: any

An edge's new key points or undefined.

Return Value: any

An edge's key points.

Default Value: undefined

A function assigned to this property should do the following:

  • Return an edge's new key points when the value parameter is set to undefined.
  • Save new point values to a data storage when the value parameter contains an edge's key points. For instance, assign these values to the obj parameter's field to save an edge's key points in your data source.
jQuery
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 returns an edge style.

Selector: style-expr
Type:

String

|

Function

Function parameters:
data: any

The current edge's data object.

value: any

An edge's new style or undefined.

Return Value: any

An edge style.

Default Value: undefined

A data source field assigned to this property should contain in-line style declarations in string format. For instance, "stroke: #999999".

A function assigned to this property should do the following:

  • Return an edge's new style as a set of CSS rules in JSON format when the value parameter is set to undefined. For instance, {"stroke": "#999999"}.
  • Save a new style value to a data storage when the value parameter contains an edge's style. For instance, assign this value to the obj parameter's field to save an edge's style in your data source.

View Demo

textExpr

Specifies the name of a data source field or an expression that returns edge text.

Selector: text-expr
Type:

String

|

Function

Function parameters:
data: any

The current edge's data object.

value: any

An edge's new text or undefined.

Return Value: any

An edge's text.

Default Value: undefined

A function assigned to this property should do the following:

  • Return an edge's new text when the value parameter is set to undefined.
  • Save a new text value to a data storage when the value parameter contains an edge's text. For instance, assign this value to the obj parameter's field to save an edge's text in your data source.

Use a string or object value to specify an edge's text:

  • String
    Specifies the text in the middle of a connector. For instance, "text".

  • Object
    Contains multiple texts and their positions on the connector. The position is a number between 0 and 1, where 0 corresponds to the connector's start point and 1 to the connector's end point. For instance, { 0.3: "text1", 0.8: "text2" }.

textStyleExpr

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

Selector: text-style-expr
Type:

String

|

Function

Function parameters:
data: any

The current edge's data object.

value: any

An edge's new text style or undefined.

Return Value: any

An edge's text style.

Default Value: undefined

A data source field assigned to this property should contain in-line style declarations in string format. For instance, "font-weight: bold; text-decoration: underline".

A function assigned to this property should do the following:

  • Return an edge's text style as a set of CSS rules in JSON format when the value parameter is set to undefined. For instance, { "font-weight": "bold", "text-decoration": "underline" }.
  • Save a new text style value to a data storage when the value parameter contains an edge's text style. For instance, assign this value to the obj parameter's field to save an edge's text style in your data source.

View Demo

toExpr

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

Selector: to-expr
Type:

String

|

Function

Function parameters:
data: any

The current edge's data object.

value: any

An edge's new end node key or undefined.

Return Value: any

An edge's end node key.

Default Value: 'to'

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

A function assigned to this property should do the following:

  • Return an edge's new end node key when the value parameter is set to undefined.
  • Save a new key value to a data storage when the value parameter contains an edge's end node key. For instance, assign this value to the obj parameter's field to save an edge's end node key in your data source.

View Demo

jQuery
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 returns an edge's line end tip.

Selector: to-line-end-expr
Type:

String

|

Function

Function parameters:
data: any

The current edge's data object.

value: any

An edge's new line end tip or undefined.

Return Value: any

An edge's line end tip.

Default Value: undefined

A function assigned to this property should do the following:

  • Return an edge's new line end tip when the value parameter is set to undefined.
  • Save a new line end tip value to a data storage when the value parameter contains an edge's line end tip. For instance, assign this value to the obj parameter's field to save an edge's line end tip in your data source.

An end line tip accepts one of the following values:

  • none
  • arrow
  • filledTriangle
  • outlinedTriangle
jQuery
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 returns an index of a shape connection point where an edge ends.

Selector: to-point-index-expr
Type:

String

|

Function

Function parameters:
data: any

The current edge's data object.

value: any

An index of a shape connection point where an edge ends or undefined.

Return Value: any

An index of a shape connection point where an edge ends.

Default Value: undefined

A function assigned to this property should do the following:

  • Return an index of a shape connection point where an edge ends when the value parameter is set to undefined.
  • Save a new index value to a data storage when the value parameter contains an index of a shape connection point. For instance, assign this value to the obj parameter's field to save an index of a shape connection point where an edge ends in your data source.

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 returns an edge's z-index.

Selector: z-index-expr
Type:

String

|

Function

Function parameters:
data: any

The current edge's data object.

value: any

An edge's new z-index or undefined.

Return Value: any

An edge's z-index.

Default Value: undefined

A function assigned to this property should do the following:

  • Return an edge's new z-index when the value parameter is set to undefined.
  • Save a new z-index value to a data storage when the value parameter contains an edge's z-index. For instance, assign this value to the obj parameter's field to save an edge's z-index in your data source.

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.