Vue Diagram - edges
Allows you to bind the collection of diagram edges to a data source. For more information, see the Data Binding section.
dataSource
Binds the edges collection to the specified data. Specify this property if you use node and edge data sources.
fromExpr
Specify this property if you use node and edge) data sources.
$(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
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";
}
});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.
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.
keyExpr
This property is required if you bind edges to a data source (edges.dataSource).
lockedExpr
Specifies the name of a data source field or an expression whose values indicate whether an edge is locked.
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
$(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}],
},
//...
];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
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"}
textExpr
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
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
Specify this property if you use (node and edge) data sources.
$(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
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";
}
});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.
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.
If you have technical questions, please create a support ticket in the DevExpress Support Center.