JavaScript/jQuery Diagram - Default Shape and Connector Settings
The Diagram component allows you to specify default settings for its items in the following ways:
- Specify settings contained in the defaultItemProperties property.
- Specify data-binding expressions contained in the edges and nodes properties to define common settings for data-bound edges and nodes.
jQuery
index.js
$(function() { $("#diagram").dxDiagram({ defaultItemProperties: { connectorLineType: "straight", style: "stroke-width: 3px", }, nodes: { // ... textStyleExpr: function() {return "fill: green"}, }, edges: { // ... styleExpr: function() {return "stroke: red"}, }, }); });
Angular
app.component.html
app.component.ts
<dx-diagram #diagram id="diagram"> <dxo-default-item-properties connectorLineType="straight" style="stroke-width: 3px"> </dxo-default-item-properties> <dxo-nodes ... [textStyleExpr]="textStyleExpr"></dxo-nodes> <dxo-edges ... [styleExpr]="styleExpr"></dxo-edges> </dx-diagram>
export class AppComponent { //... styleExpr(obj) { return { "stroke": "red" }; } textStyleExpr(obj) { return { "fill": "green" }; } }
Vue
App.vue
<template> <DxDiagram id="diagram" ref="diagram" > <DxDefaultItemProperties :connector-line-type="'straight'" :style="'stroke-width: 3px'" /> <DxNodes ... :text-style-expr="textStyleExpr" /> <DxEdges ... :style-expr="styleExpr" /> </DxDiagram> </template> <script> import { DxDiagram, DxNodes, DxEdges, DxDefaultItemProperties} from 'devextreme-vue/diagram'; export default { components: { DxDiagram, DxNodes, DxEdges, DxDefaultItemProperties }, data() {...}, methods: { textStyleExpr() { return 'fill: green'; }, styleExpr() { return 'stroke: red'; }, } }; </script>
React
App.js
import Diagram, { Nodes, Edges, DefaultItemProperties} from 'devextreme-react/diagram'; // ... render() { return ( <Diagram id="diagram"> <DefaultItemProperties connectorLineType="straight"/> <Nodes ... textStyleExpr={this.itemTextStyleExpr} /> <Edges ... styleExpr={this.itemStyleExpr}/> </Diagram> ); } itemTextStyleExpr(obj) { return { 'fill': 'green' }; } itemStyleExpr(obj) { return { 'stroke': 'red' }; }
ASP.NET Core Controls
DiagramPage.cshtml
@(Html.DevExtreme().Diagram() .ID("diagram") .DefaultItemProperties(prop=> prop .Style("stroke-width: 3px") .ConnectorLineType(DiagramConnectorLineType.Straight) ) .Nodes(ns => ns // ... .TextStyleExpr(new JS("textStyleExpr")) ) .Edges(ns => ns // ... .StyleExpr(new JS("styleExpr")) ) ) <script type="text/javascript"> function textStyleExpr(obj) { return "fill: green"; } function styleExpr(obj) { return "stroke: red"; } </script>
ASP.NET MVC Controls
DiagramPage.cshtml
@(Html.DevExtreme().Diagram() .ID("diagram") .DefaultItemProperties(prop=> prop .Style("stroke-width: 3px") .ConnectorLineType(DiagramConnectorLineType.Straight) ) .Nodes(ns => ns // ... .TextStyleExpr(new JS("textStyleExpr")) ) .Edges(ns => ns // ... .StyleExpr(new JS("styleExpr")) ) ) <script type="text/javascript"> function textStyleExpr(obj) { return "fill: green"; } function styleExpr(obj) { return "stroke: red"; } </script>
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.