JavaScript/jQuery Diagram Options
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
accessKey
The value of this option will be passed to the accesskey attribute of the HTML element that underlies the widget.
customShapes[]
Use the customShapes option to extend a collection of built-in shapes with custom shapes. Custom shapes are displayed in the toolbox panel’s Custom tab.
jQuery
$(function() {
var diagram = $("#diagram").dxDiagram({
customShapes: [{
id: 0,
title: "Internet",
svgUrl: "images/shapes/internet.svg",
svgLeft: 0.15,
svgTop: 0,
svgWidth: 0.7,
svgHeight: 0.7,
defaultWidth: 1.9,
defaultHeight: 1.9,
defaultText: "Internet",
allowHasText: true,
textLeft: 0,
textTop: 0.7,
textWidth: 1,
textHeight: 0.3,
connectionPoints: [
{ x: 0.5, y: 0 },
{ x: 0.9, y: 0.5 },
{ x: 0.5, y: 1 },
{ x: 0.1, y: 0.5 }
]
},
{
id: 1,
title: "Laptop",
svgUrl: "images/shapes/laptop.svg",
svgLeft: 0.15,
svgTop: 0,
svgWidth: 0.7,
svgHeight: 0.7,
defaultWidth: 1.9,
defaultHeight: 1.9,
defaultText: "Laptop",
allowHasText: true,
textLeft: 0,
textTop: 0.7,
textWidth: 1,
textHeight: 0.3,
connectionPoints: [
{ x: 0.5, y: 0 },
{ x: 0.9, y: 0.5 },
{ x: 0.5, y: 1 },
{ x: 0.1, y: 0.5 }
]
},
// ...
]
}).dxDiagram("instance");
});edges
Use the edges option to populate an array of diagram edges.
jQuery
$(function() {
$("#diagram").dxDiagram({
nodes: {
dataSource: orgItems
},
edges: {
dataSource: orgLinks
},
layout: "tree"
});
});elementAttr
Specifies the attributes to be attached to the widget's root element.
jQuery
$(function(){
$("#diagramContainer").dxDiagram({
// ...
elementAttr: {
id: "elementId",
class: "class-name"
}
});
});Angular
<dx-diagram ...
[elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-diagram>
import { DxDiagramModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxDiagramModule
],
// ...
})ASP.NET MVC Controls
@(Html.DevExtreme().Diagram()
.ElementAttr("class", "class-name")
// ===== or =====
.ElementAttr(new {
@id = "elementId",
@class = "class-name"
})
// ===== or =====
.ElementAttr(new Dictionary<string, object>() {
{ "id", "elementId" },
{ "class", "class-name" }
})
)@(Html.DevExtreme().Diagram() _
.ElementAttr("class", "class-name")
' ===== or =====
.ElementAttr(New With {
.id = "elementId",
.class = "class-name"
})
' ===== or =====
.ElementAttr(New Dictionary(Of String, Object) From {
{ "id", "elementId" },
{ "class", "class-name" }
})
)export
These features allow a user to export your diagram into a document. A click on the Export button invokes a drop-down menu that lists export commands. The following formats are supported for exporting into: PNG, JPEG, and SVG.
height
This option accepts a value of one of the following types:
Number
The height in pixels.String
A CSS-accepted measurement of height. For example,"55px","80%","inherit".Function
A function returning either of the above. For example:JavaScriptheight: function() { return window.innerHeight / 1.5; }
nodes
Use the nodes option to populate an array of diagram nodes.
jQuery
$(function() {
$("#diagram").dxDiagram({
nodes: {
dataSource: orgItems
},
edges: {
dataSource: orgLinks
},
layout: "tree"
});
});onContentReady
A function that is executed when the widget's content is ready and each time the content is changed.
| Name | Type | Description |
|---|---|---|
| component |
The widget's instance. |
|
| element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| model |
The model data. Available only when using Knockout. |
onDataChanged
| Name | Type | Description |
|---|---|---|
| component |
The widget instance's name. |
|
| data |
The data. |
|
| element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| model |
Model data. Available only if you use Knockout. |
onDisposing
A function that is executed before the widget is disposed of.
| Name | Type | Description |
|---|---|---|
| component |
The widget's instance. |
|
| element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| model |
The model data. Available only if you use Knockout. |
onInitialized
| Name | Type | Description |
|---|---|---|
| component |
The widget's instance. |
|
| element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
onOptionChanged
| Name | Type | Description |
|---|---|---|
| model |
The model data. Available only if you use Knockout. |
|
| fullName |
The path to the modified option that includes all parent options. |
|
| element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| component |
The widget's instance. |
|
| name |
The modified option if it belongs to the first level. Otherwise, the first-level option it is nested into. |
|
| value | any |
The modified option's new value. |
rtlEnabled
When this option is set to true, the widget text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.
DevExpress.config({
rtlEnabled: true
});See Also
- Right-to-Left Support Demo: DataGrid | Navigation Widgets | Editors
tabIndex
The value of this option will be passed to the tabindex attribute of the HTML element that underlies the widget.
width
This option accepts a value of one of the following types:
Number
The width in pixels.String
A CSS-accepted measurement of width. For example,"55px","80%","auto","inherit".Function
A function returning either of the above. For example:JavaScriptwidth: function() { return window.innerWidth / 1.5; }