React Diagram - defaultItemProperties

Configures default item properties.

Type:

Object

Default Value: {}

Default property values are applied to newly created items if no other values are provided.

index.js
$(function() {
    $("#diagram").dxDiagram({
        nodes: {
            //...
        },
        defaultItemProperties: {
            connectorLineStart: "outlinedTriangle",
            connectorLineEnd: "none",
            connectorLineType: "straight",
            style: "fill: #d9d9d9; stroke: #999999",
            textStyle: "font-weight: bold; text-decoration: underline"
        }
    });
});

connectorLineEnd

Specifies the default tip of a connector's end point.

Type:

String

Default Value: 'arrow'
Accepted Values: 'none' | 'arrow' | 'outlinedTriangle' | 'filledTriangle'

The connectorLineEnd property specifies a tip that is displayed at a connector's end point if the toLineEndExpr property does not provide another value.

Use the DiagramConnectorLineEnd enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: None, Arrow, OutlinedTriangle, FilledTriangle.

connectorLineStart

Specifies the default tip of a connector's start point.

Type:

String

Default Value: 'none'
Accepted Values: 'none' | 'arrow' | 'outlinedTriangle' | 'filledTriangle'

The connectorLineStart property specifies a tip that is displayed at a connector's start point if the fromLineEndExpr property does not provide another value.

Use the DiagramConnectorLineEnd enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: None, Arrow, OutlinedTriangle, FilledTriangle.

connectorLineType

Specifies the default type of a connector.

Type:

String

Default Value: 'orthogonal'
Accepted Values: 'straight' | 'orthogonal'

The connectorLineType property specifies a type of a connector if the lineTypeExpr property does not provide another value.

Use the DiagramConnectorLineType enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Straight, Orthogonal.

style

Specifies a default item style.

Type:

Object

The style property specifies the style applied to a shape/connector if the nodes.styleExpr/edges.styleExpr property does not provide another value.

The style settings can be specified in the following ways:

  • as inline style declaration, for instance "fill: #d9d9d9; stroke: #999999",
  • as CSS rules presented in JSON format, , for instance {"fill": "#d9d9d9", "stroke": "#999999"}.

textStyle

Specifies an item's default text style.

Type:

Object

The textStyle property specifies a text style that is applied to a shape/connector if the nodes.textStyleExpr/edges.textStyleExpr property does not provide another value.

The style settings can be specified in the following ways:

  • as inline style declaration, for instance "font-weight: bold; text-decoration: underline",
  • as CSS rules in JSON format, for instance { "font-weight": "bold", "text-decoration": "underline" }.