All docs
V21.1
24.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
Box
Map
A newer version of this page is available. Switch to the current version.

JavaScript/jQuery Diagram - defaultItemProperties

Configures default item properties.

Type:

Object

Default Value: {}

The component applies default property values to newly created items if you do not specify the values.

jQuery
JavaScript
$(function() {
    $("#diagram").dxDiagram({
        nodes: {
            //...
        },
        defaultItemProperties: {
            connectorLineStart: "outlinedTriangle",
            connectorLineEnd: "none",
            connectorLineType: "straight",
            style: "fill: #d9d9d9; stroke: #999999",
            textStyle: "font-weight: bold; text-decoration: underline"
        }
    });
});
Angular
app.component.html
+
<dx-diagram #diagram id="diagram">
    <dxo-nodes ... />
    <dxo-default-item-properties 
        connectorLineStart="outlinedTriangle" 
        connectorLineEnd="none" 
        connectorLineType="straight" 
        style="fill: #d9d9d9; stroke: #999999" 
        textStyle="font-weight: bold; text-decoration: underline">
    </dxo-default-item-properties>
</dx-diagram>
Vue
App.vue
<DxDiagram
    id="diagram"
    ref="diagram"
>
    <DxNodes ... >
    <DxDefaultItemProperties 
        :connector-line-start="'outlinedTriangle'" 
        :connector-line-end="'none'" 
        :connector-line-type="'straight'" 
        :style="'fill: #d9d9d9; stroke: #999999'" 
        :text-style="'font-weight: bold; text-decoration: underline'"/>
</DxDiagram>
React
App.js
<Diagram id="diagram">
    <Nodes ... />
    <DefaultItemProperties 
        connectorLineStart="outlinedTriangle" 
        connectorLineEnd="none" 
        connectorLineType="straight" 
        textStyle="font-weight: bold; text-decoration: underline"/>
</Diagram>

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.

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.

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.

shapeMaxHeight

Specifies the default maximum height of a shape.

Type:

Number

Default Value: undefined

The shapeMaxHeight property specifies the maximum height of a shape if the maxHeight property does not provide another value.

shapeMaxWidth

Specifies the default maximum width of a shape.

Type:

Number

Default Value: undefined

The shapeMaxWidth property specifies the maximum width of a shape if the maxWidth property does not provide another value.

shapeMinHeight

Specifies the default minimum height of a shape.

Type:

Number

Default Value: undefined

The shapeMinHeight property specifies the minimum height of a shape if the minHeight property does not provide another value.

shapeMinWidth

Specifies the default minimum width of a shape.

Type:

Number

Default Value: undefined

The shapeMinWidth property specifies the minimum width of a shape if the minWidth property does not provide another value.

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