JavaScript/jQuery Diagram - defaultItemProperties
The component applies default property values to newly created items if you do not specify the values.
jQuery
$(function() { $("#diagram").dxDiagram({ nodes: { //... }, defaultItemProperties: { connectorLineStart: "outlinedTriangle", connectorLineEnd: "none", connectorLineType: "straight", style: "fill: #d9d9d9; stroke: #999999", textStyle: "font-weight: bold; text-decoration: underline" } }); });
Angular
+ <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
<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
<Diagram id="diagram"> <Nodes ... /> <DefaultItemProperties connectorLineStart="outlinedTriangle" connectorLineEnd="none" connectorLineType="straight" textStyle="font-weight: bold; text-decoration: underline"/> </Diagram>
connectorLineEnd
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
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
The connectorLineType property specifies a type of a connector if the lineTypeExpr property does not provide another value.
shapeMaxHeight
The shapeMaxHeight property specifies the maximum height of a shape if the maxHeight property does not provide another value.
shapeMaxWidth
The shapeMaxWidth property specifies the maximum width of a shape if the maxWidth property does not provide another value.
shapeMinHeight
The shapeMinHeight property specifies the minimum height of a shape if the minHeight property does not provide another value.
shapeMinWidth
The shapeMinWidth property specifies the minimum width of a shape if the minWidth property does not provide another value.
style
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
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" }
.
If you have technical questions, please create a support ticket in the DevExpress Support Center.