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.
- $(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.
- $(function() {
- $("#diagram").dxDiagram({
- nodes: {
- dataSource: orgItems
- },
- edges: {
- dataSource: orgLinks
- },
- layout: "tree"
- });
- });
elementAttr
Specifies the attributes to be attached to the widget's root element.
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:JavaScript- height: function() {
- return window.innerHeight / 1.5;
- }
nodes
Use the nodes option to populate an array of diagram nodes.
- $(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:JavaScript- width: function() {
- return window.innerWidth / 1.5;
- }
If you have technical questions, please create a support ticket in the DevExpress Support Center.