Vue Diagram - nodes

Allows you to bind the collection of diagram nodes to a data source.

Type:

Object

Default Value: null

autoLayout

Specifies an auto-layout algorithm that the widget uses to build a diagram.

Type:

String

|

Object

Default Value: 'tree'
Accepted Values: 'off' | 'tree' | 'layered'

The layout option is in effect when a diagram is bound to a data source using the nodes option.

View Demo

childrenExpr

Specifies the name of a data source field or an expression that provides a container's nested items.

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: 'children'

This option is in effect for nodes of the "verticalContainer" or "horizontalContainer" type.

containerKeyExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: undefined

The parent container node must be of the "verticalContainer" or "horizontalContainer" type.

To use the containerKeyExpr option set the childrenExpr option to 'null'.

dataSource

Binds the nodes collection to the specified data.

Default Value: null

The Diagram widget creates a shape for every node in the collection.

heightExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: undefined

imageUrlExpr

Specifies the name of a data source field or an expression that provides a node image's URL.

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: undefined

This option is in effect for nodes of the "cardWithImageOnLeft", "cardWithImageOnTop", or "cardWithImageOnRight" type.

itemsExpr

Specifies the name of a data source field or an expression that provides a node's nested items.

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: undefined

keyExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: 'id'

leftExpr

Specifies the name of a data source field or an expression that provides the x-coordinate of a node's left border.

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: undefined

The units option specifies the measurement unit.

NOTE
Shape coordinates specified by the leftExpr and topExpr options are ignored when the autoLayout.type option is set to layered or tree.

lockedExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: undefined

parentKeyExpr

Specifies the name of a data source field or an expression that provides a parent node key for a node.

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: undefined

styleExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: undefined

The style settings must be specified as CSS rules presented in JSON format, for instance { "stroke": "#444444" }.

View Demo

textExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: 'text'

textStyleExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: undefined

The style settings must be specified as CSS rules presented in JSON format, for instance { "font-weight": "bold", "text-decoration": "underline" }.

View Demo

topExpr

Specifies the name of a data source field or an expression that provides the y-coordinate of a node's top border.

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: undefined

The units option specifies the measurement unit.

NOTE
Shape coordinates specified by the leftExpr and topExpr options are ignored when the autoLayout.type option is set to layered or tree.

typeExpr

Specifies the name of a data source field or an expression that provides the shape type for a node.

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: 'type'

widthExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: undefined

zIndexExpr

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

Type:

String

|

Function

Function parameters:
data:

Object

The current node's data object.

Default Value: undefined

The z-index specifies the node stack order. A node with greater stack order is in front of a node with a lower stack order.