JavaScript/jQuery Diagram Options

Default Value: false

This option is used when the widget is displayed on a platform whose guidelines include the active state change for widgets.

customShapes[]

An array of custom shapes.

Type:

Array<Object>

Default Value: []

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.

View Demo

jQuery

JavaScript

$(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");
});

disabled

Specifies whether the widget responds to user interaction.

Type:

Default Value: false

edges

An array of diagram edges.

Type:

Default Value: null

Use the edges option to populate an array of diagram edges.

View Demo

jQuery

JavaScript

$(function() {
    $("#diagram").dxDiagram({
        nodes: {
            dataSource: orgItems
        },
        edges: {
            dataSource: orgLinks
        },
        layout: "tree"
    });
});

elementAttr

Specifies the attributes to be attached to the widget's root element.

Type:

Default Value: {}

jQuery

$(function(){
    $("#diagramContainer").dxDiagram({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

Angular

HTML

TypeScript

<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

Razor C#

Razor VB

@(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" }
    })
)

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.

NOTE

Safari on Mac OS does not implement an API for saving files and requires setting up a server-side proxy. For more information, refer to the proxyUrl option description.

focusStateEnabled

Specifies whether the widget can be focused using keyboard navigation.

Type:

Default Value: false

height

Specifies the widget's height.

Type:

|

|

Return Value:

|

The widget's height.

Default Value: undefined

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;
}
```

hint

Specifies text for a hint that appears when a user pauses on the widget.

Type:

String

Default Value: undefined

hoverStateEnabled

Specifies whether the widget changes its state when a user pauses on it.

Type:

Default Value: false

layout

Specifies an auto-layout algorithm that the widget uses to build a diagram.

Type:

String

Default Value: 'tree'

Accepted Values: 'tree' | 'sugiyama'

Note that the layout option is in effect when a diagram is bound to a data source via the nodes and edges options.

nodes

An array of diagram nodes.

Type:

Default Value: null

Use the nodes option to populate an array of diagram nodes.

View Demo

jQuery

JavaScript

$(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.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
component	Diagram	The widget's instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	The model data. Available only when using Knockout.

Default Value: null

onDataChanged

A function that is executed when the diagram's data changes.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
component	Diagram	The widget instance's name.
data	String	The data.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	Model data. Available only if you use Knockout.

Default Value: null

onDisposing

A function that is executed before the widget is disposed of.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
component	Diagram	The widget's instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	The model data. Available only if you use Knockout.

Default Value: null

onInitialized

A function used in JavaScript frameworks to save the widget instance.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
component	Diagram	The widget's instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

Default Value: null

onOptionChanged

A function that is executed after a widget option is changed.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
model	Object	The model data. Available only if you use Knockout.
fullName	String	The path to the modified option that includes all parent options.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	Diagram	The widget's instance.
name	String	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.

Default Value: null

rtlEnabled

Switches the widget to a right-to-left representation.

Type:

Default Value: false

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.

JavaScript

DevExpress.config({
    rtlEnabled: true
});

tabIndex

Specifies the number of the element when the Tab key is used for navigating.

Type:

Number

Default Value: 0

The value of this option will be passed to the tabindex attribute of the HTML element that underlies the widget.

visible

Specifies whether the widget is visible.

Type: