React Diagram Props

An object that defines the Diagram widget's configuration options.

See Also

accessKey

Specifies the shortcut key that sets focus on the widget.

Type:

String

Default Value: null

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

activeStateEnabled

Specifies whether or not the widget changes its state when interacting with a user.

Type:

Boolean

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:

Boolean

Default Value: false

edges

An array of diagram edges.

Type:

Object

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:

Object

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

export

Configures export features.

Type:

Object

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:

Boolean

Default Value: false

height

Specifies the widget's height.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

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:

Boolean

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:

Object

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

Function parameters:
e:

Object

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

Function parameters:
e:

Object

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

Function parameters:
e:

Object

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

Function parameters:
e:

Object

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

See Also

onOptionChanged

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

Type:

Function

Function parameters:
e:

Object

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:

Boolean

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
});
See Also

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:

Boolean

Default Value: true

width

Specifies the widget's width.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The widget's width.

Default Value: undefined

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