React Diagram Props

An object that defines the Diagram UI component's configuration properties.

autoZoomMode

Specifies how the Diagram UI component automatically zooms the work area.

Type:

AutoZoomMode

Default Value: 'disabled'

When the autoZoomMode property is set to fitContent or fitWidth, the Diagram component automatically zooms the work area when the diagram’s layout changes. You can call the fitToContent and fitToWidth methods to fit the zoom level once.

The table below lists the autoZoomMode property values and their descriptions.

Value Description
fitContent Fits the diagram content into the work area. The maximum scale is 100%.
fitWidth Fits the diagram content's width into the work area width. The maximum scale is 100%.
disabled Auto-zoom is disabled.

contextMenu

Configures the context menu's settings.

Selector: ContextMenu
Type:

Object

Default Value: {}

contextToolbox

Configures the context toolbox's settings.

Selector: ContextToolbox
Type:

Object

Default Value: {}

View Demo

The context toolbox appears when you draw a connector from a shape and release it without it being connected to another shape. The toolbox allows you to create a shape at the end of the connector.

Diagram context toolbox

customShapeComponent

An alias for the customShapeTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

customShapeRender

An alias for the customShapeTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

customShapes[]

Provide access to an array of custom shapes.

Selector: CustomShape
Type:

Array<Object>

Default Value: []

Use the customShapes property to extend a collection of built-in shapes with custom shapes.

Use the toolbox property to add the custom shapes to the toolbox.

jQuery
index.js
$(function() {
    var diagram = $("#diagram").dxDiagram({
        customShapes: [{
            category: "hardware",
            type: "internet",
            title: "Internet",
            backgroundImageUrl: "images/shapes/internet.svg",
            backgroundImageLeft: 0.15,
            backgroundImageTop: 0,
            backgroundImageWidth: 0.7,
            backgroundImageHeight: 0.7,
            defaultWidth: 0.75,
            defaultHeight: 0.75,
            defaultText: "Internet",
            allowEditText: 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 }
            ]
        },
        ...
    ],
    toolbox: {
        groups: [{ category: "hardware", title: "Hardware" }]
    }
}).dxDiagram("instance");
Angular
app.component.html
app.component.ts
<dx-diagram #diagram id="diagram">
    <dxi-custom-shape 
        category="hardware"
        type="internet"
        title="Internet"
        backgroundImageUrl="images/shapes/internet.svg"
        [backgroundImageLeft]="0.15"
        [backgroundImageTop]="0"
        [backgroundImageWidth]="0.7"
        [backgroundImageHeight]="0.7"
        [defaultWidth]="0.75"
        [defaultHeight]="0.75"
        defaultText="Internet"
        [allowEditText]="false"
        [textLeft]="0"
        [textTop]="0.7"
        [textWidth]="1"
        [textHeight]="0.3">
        <dxi-connection-point [x]="0.5" [y]="0"></dxi-connection-point>
        <dxi-connection-point [x]="0.9" [y]="0.5"></dxi-connection-point>
        <dxi-connection-point [x]="0.5" [y]="1"></dxi-connection-point>
        <dxi-connection-point [x]="0.1" [y]="0.5"></dxi-connection-point>
    </dxi-custom-shape>
    ...
    <dxo-toolbox>
        <dxi-group category="hardware" title="Hardware"></dxi-group>
    </dxo-toolbox>
</dx-diagram>
import { NgModule, Component, ViewChild, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { HttpClient, HttpClientModule } from '@angular/common/http';

import { DxDiagramModule, DxDiagramComponent } from 'devextreme-angular';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild(DxDiagramComponent, { static: false }, { static: false }) diagram: DxDiagramComponent;
    // Prior to Angular 8
    // @ViewChild(DxDiagramComponent, { static: false }) diagram: DxDiagramComponent;

    constructor(http: HttpClient) {
        http.get('data/diagram-hardware.json').subscribe(data => {
            this.diagram.instance.import(JSON.stringify(data));
        }, err => {
            throw 'Data Loading Error'
        });
    }
}
Vue
App.vue
<template>
    <DxDiagram
        id="diagram"
        ref="diagram"
    >
        <DxCustomShape
            :category="'hardware'"
            :type="'internet'"
            :title="'Internet'"
            :background-image-url="'images/shapes/internet.svg'"
            :background-image-left="0.15"
            :background-image-top="0"
            :background-image-width="0.7"
            :background-image-height="0.7"
            :default-width="0.75"
            :default-height="0.75"
            :default-text="'Internet'"
            :allow-edit-text="true"
            :text-left="0"
            :text-top="0.7"
            :text-width="1"
            :text-height="0.3"
        >
            <DxConnectionPoint
                :x="0.5"
                :y="0"
            />
            <DxConnectionPoint
                :x="0.9"
                :y="0.5"
            />
            <DxConnectionPoint
                :x="0.5"
                :y="1"
            />
            <DxConnectionPoint
                :x="0.1"
                :y="0.5"
            />
        </DxCustomShape>
        ...
        <DxToolbox :visible="true">
            <DxGroup
                :category="'hardware'"
                :title="'Hardware'"
            />
        </DxToolbox>
    </DxDiagram>
</template>

<script>
import { DxDiagram, DxGroup, DxToolbox, DxCustomShape, DxConnectionPoint } from 'devextreme-vue/diagram';
import 'whatwg-fetch';

export default {
components: {
    DxDiagram, DxGroup, DxToolbox, DxCustomShape, DxConnectionPoint
},
mounted() {
    var diagram = this.$refs['diagram'].instance;
    fetch('data/diagram-hardware.json')
    .then(function(response) {
        return response.json();
    })
    .then(function(json) {
        diagram.import(JSON.stringify(json));
    })
    .catch(function() {
        throw 'Data Loading Error';
    });
}
};
</script>
React
App.js
import React from 'react';
import Diagram, { CustomShape, ConnectionPoint, Group, Toolbox } from 'devextreme-react/diagram';

class App extends React.Component {
constructor(props) {
    super(props);

    this.diagramRef = React.createRef();
}

    render() {
        return (
            <Diagram id="diagram" ref={this.diagramRef}>
                <CustomShape
                    category="hardware"
                    type="internet"
                    title="Internet"
                    backgroundImageUrl="images/shapes/internet.svg"
                    backgroundImageLeft={0.15}
                    backgroundImageTop={0}
                    backgroundImageWidth={0.7}
                    backgroundImageHeight={0.7}
                    defaultWidth={0.75}
                    defaultHeight={0.75}
                    defaultText="Internet"
                    allowEditText={true}
                    textLeft={0}
                    textTop={0.7}
                    textWidth={1}
                    textHeight={0.3}>
                <ConnectionPoint x={0.5} y={0} />
                <ConnectionPoint x={0.9} y={0.5} />
                <ConnectionPoint x={0.5} y={1} />
                <ConnectionPoint x={0.1} y={0.5} />
                </CustomShape>
                ...
                <Toolbox>
                    <Group category="hardware" title="Hardware" />
                </Toolbox>
            </Diagram>
        );
    }
}
export default App;
ASP.NET MVC Controls
CustomShapesWithIcons.cshtml
@(Html.DevExtreme().Diagram()
    .ID("diagram")
    .CustomShapes(cs => {
        cs.Add()
            .Category("hardware")
            .Type("internet")
            .Title("Internet")
            .BackgroundImageUrl("../../Content/Images/shapes/internet.svg")
            .BackgroundImageLeft(0.15)
            .BackgroundImageTop(0)
            .BackgroundImageWidth(0.7)
            .BackgroundImageHeight(0.7)
            .DefaultWidth(1.9)
            .DefaultHeight(1.9)
            .DefaultText("Internet")
            .AllowEditText(true)
            .TextLeft(0)
            .TextTop(0.7)
            .TextWidth(1)
            .TextHeight(0.3)
            .ConnectionPoints(cp => {
                cp.Add().X(0.5).Y(0);
                cp.Add().X(0.9).Y(0.5);
                cp.Add().X(0.5).Y(1);
                cp.Add().X(0.1).Y(0.5);

            });
        ...    
    })
    .Toolbox(tb => tb
        .Groups(g => g.Add().Category("hardware").Title("Hardware"))
    )
)    

View Demo

See Also

customShapeTemplate

Specifies a custom template for shapes.

Type:

template

Template Data:
Name Type Description
item

dxDiagramShape

The processed shape's object.

IMPORTANT
  • Template content must be presented as SVG elements.

  • We recommend that you do not use the foreignObject element to define template content (Safari does not support this element).

Use the template property to define a template of an individual shape.

Set a custom shape's allowEditText option to false to disable shape text editing. Otherwise, users can add shape text that may overlap with template content.

If the textExpr option is specified, template content may overlap with text from the data source. Since the textExpr option has the default value 'text', the widget will obtain node texts from the data source’s 'text' field. To prevent this behavior, set the option to an empty string: nodes: { textExpr: "", ....

View Demo

See Also

customShapeToolboxComponent

An alias for the customShapeToolboxTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

customShapeToolboxRender

An alias for the customShapeToolboxTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

customShapeToolboxTemplate

Specifies a custom template for shapes in the toolbox.

Type:

template

Template Data:
Name Type Description
item

dxDiagramShape

Information about the currently processed shape.

IMPORTANT
  • Template content must be presented as SVG elements.

  • We recommend that you do not use the foreignObject element to define template content (Safari does not support this element).

Use the toolboxTemplate property to define a template for each shape in the toolbox.

View Demo

See Also

defaultItemProperties

Configures default item properties.

Selector: DefaultItemProperties
Type:

Object

Default Value: {}

The component applies default property values to newly created items if you do not specify the values.

jQuery
JavaScript
$(function() {
    $("#diagram").dxDiagram({
        nodes: {
            //...
        },
        defaultItemProperties: {
            connectorLineStart: "outlinedTriangle",
            connectorLineEnd: "none",
            connectorLineType: "straight",
            style: "fill: #d9d9d9; stroke: #999999",
            textStyle: "font-weight: bold; text-decoration: underline"
        }
    });
});
Angular
app.component.html
+
<dx-diagram #diagram id="diagram">
    <dxo-nodes ... />
    <dxo-default-item-properties 
        connectorLineStart="outlinedTriangle" 
        connectorLineEnd="none" 
        connectorLineType="straight" 
        style="fill: #d9d9d9; stroke: #999999" 
        textStyle="font-weight: bold; text-decoration: underline">
    </dxo-default-item-properties>
</dx-diagram>
Vue
App.vue
<DxDiagram
    id="diagram"
    ref="diagram"
>
    <DxNodes ... >
    <DxDefaultItemProperties 
        :connector-line-start="'outlinedTriangle'" 
        :connector-line-end="'none'" 
        :connector-line-type="'straight'" 
        :style="'fill: #d9d9d9; stroke: #999999'" 
        :text-style="'font-weight: bold; text-decoration: underline'"/>
</DxDiagram>
React
App.js
<Diagram id="diagram">
    <Nodes ... />
    <DefaultItemProperties 
        connectorLineStart="outlinedTriangle" 
        connectorLineEnd="none" 
        connectorLineType="straight" 
        textStyle="font-weight: bold; text-decoration: underline"/>
</Diagram>

disabled

Specifies whether the UI component responds to user interaction.

Type:

Boolean

Default Value: false

edges

Allows you to bind the collection of diagram edges to a data source. For more information, see the Data Binding section.

Selector: Edges
Type:

Object

Default Value: null

editing

Specifies which editing operations a user can perform.

Selector: Editing
Type:

Object

Default Value: {}

elementAttr

Specifies the global attributes to be attached to the UI component's container element.

Selector: ElementAttr
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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDiagram ...
        :element-attr="diagramAttributes">
    </DxDiagram>
</template>

<script>
import DxDiagram from 'devextreme-vue/diagram';

export default {
    components: {
        DxDiagram
    },
    data() {
        return {
            diagramAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>
React
App.js
import React from 'react';

import Diagram from 'devextreme-react/diagram';

class App extends React.Component {
    diagramAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <Diagram ...
                elementAttr={this.diagramAttributes}>
            </Diagram>
        );
    }
}
export default App;

export

Configures export settings.

Selector: Export
Type:

Object

These settings are used when a diagram is exported via a UI.

The Export button invokes a drop-down menu that lists export commands. The following formats are supported: PNG, JPEG, and SVG.

fullScreen

Specifies whether or not to display the UI component in full-screen mode.

Type:

Boolean

Default Value: false

If the Diagram UI component is contained in a frame, the fullScreen property can be set in a user-generated event handler (a button click, a key press) for security reasons.

gridSize

Specifies the grid pitch.

Selector: GridSize
Type:

Number

|

Object

When the showGrid property is set to true, the Diagram UI component displays grid lines that help users align diagram elements. Use the gridSize property to specify the grid pitch.

The units property specifies the measurement unit.

jQuery
JavaScript
$(function() {
    $("#diagram").dxDiagram({
        viewUnits: "cm",
        units: "cm",
        gridSize: {
            value: 2,
            items: [1, 2, 3]
        },
        // or
        // gridSize: 2,
    });
});
Angular
app.component.html
+
<dx-diagram #diagram id="diagram" viewUnits="cm" units="cm">
    <dxo-grid-size 
        [value]="2" 
        [items]='[1, 2, 3]'>
    </dxo-grid-size>
</dx-diagram>
Vue
App.vue
<template>
<DxDiagram
    id="diagram"
    ref="diagram"
    units="cm"
    viewUnits="cm"
>
    <DxGridSize
    :value="2"
    :items="['1', '2', '3']"
    />
</DxDiagram>
</template>
React
App.js
class App extends React.Component {
    // ...
    render() {
        return (
            <Diagram id="diagram" ref={this.diagramRef} units="cm" viewUnits="cm">
                <GridSize value={2} items={[1, 2, 3]} />
            </Diagram>
        );
    }
}
See Also

hasChanges

Indicates whether diagram content has unsaved changes.

Type:

Boolean

Default Value: false

The Diagram UI component sets the hasChanges property to true after any change and never resets this value to false. You should set the hasChanges property to false after you save the component's data.

jQuery

The optionChanged event occurs when the hasChanges property value changes. Handle this event as shown below to automatically save diagram data in a storage:

index.js
var autoSaveIntervalMs = 2000;
var autoSaveTimeout = -1;

$("#diagram").dxDiagram({
onOptionChanged: function(e) {
    if(e.name === "hasChanges" && e.value && autoSaveTimeout === -1) {
        autoSaveTimeout = setTimeout(function() {
            var data = e.component.export();
            window.localStorage.setItem("foo", data); // saves data to a local storage
            autoSaveTimeout = -1;
            e.component.option("hasChanges", false);
        }, autoSaveIntervalMs);
    }
}

height

Specifies the UI component's height.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The UI component's height.

Default Value: undefined

This property accepts a value of one of the following types:

  • Number
    The height in pixels.

  • String
    A CSS-accepted measurement of height. For example, "55px", "20vh", "80%", "inherit".

  • Function (deprecated since v21.2)
    Refer to the W0017 warning description for information on how you can migrate to viewport units.

historyToolbar

Configures the history toolbar's settings.

Selector: HistoryToolbar
Type:

Object

Default Value: {}

mainToolbar

Configures the main toolbar settings.

Selector: MainToolbar
Type:

Object

Default Value: {}

nodes

Allows you to bind the collection of diagram nodes to a data source. For more information, see the Data Binding section.

Selector: Nodes
Type:

Object

Default Value: null

onContentReady

A function that is executed when the UI component is rendered and each time the component is repainted.

Type:

Function

Function parameters:

Information about the event.

Object structure:
Name Type Description
element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

component

Diagram

The UI component's instance.

Default Value: null

onCustomCommand

A function that is executed after a custom command item was clicked and allows you to implement the custom command's logic.

Type:

Function

Function parameters:

Information about the event.

Object structure:
Name Type Description
component

Diagram

The UI component instance's name.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

name

String

The name of the clicked item.

onDisposing

A function that is executed before the UI component is disposed of.

Type:

Function

Function parameters:

Information about the event.

Object structure:
Name Type Description
element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

component

Diagram

The UI component's instance.

Default Value: null

onInitialized

A function used in JavaScript frameworks to save the UI component instance.

Type:

Function

Function parameters:

Information about the event.

Object structure:
Name Type Description
element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

component

Diagram

The UI component's instance.

Default Value: null

Angular
app.component.html
app.component.ts
<dx-diagram ...
    (onInitialized)="saveInstance($event)">
</dx-diagram>
import { Component } from "@angular/core";
import Diagram from "devextreme/ui/data_grid";
// ...
export class AppComponent {
    diagramInstance: Diagram;
    saveInstance (e) {
        this.diagramInstance = e.component;
    }
}
Vue
App.vue (Options API)
App.vue (Composition API)
<template>
    <div>
        <DxDiagram ...
            @initialized="saveInstance">
        </DxDiagram>
    </div>
</template>

<script>
import DxDiagram from 'devextreme-vue/diagram';

export default {
    components: {
        DxDiagram
    },
    data: function() {
        return {
            diagramInstance: null
        };
    },
    methods: {
        saveInstance: function(e) {
            this.diagramInstance = e.component;
        }
    }
};
</script>
<template>
    <div>
        <DxDiagram ...
            @initialized="saveInstance">
        </DxDiagram>
    </div>
</template>

<script setup>
import DxDiagram from 'devextreme-vue/diagram';

let diagramInstance = null;

const saveInstance = (e) => {
    diagramInstance = e.component;
}
</script>
React
App.js
import Diagram from 'devextreme-react/diagram';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.saveInstance = this.saveInstance.bind(this);
    }

    saveInstance(e) {
        this.diagramInstance = e.component;
    }

    render() {
        return (
            <div>
                <Diagram onInitialized={this.saveInstance} />
            </div>
        );
    }
}
See Also
jQuery
  • Get a UI component Instance in jQuery
Angular
  • Get a UI component Instance in Angular
Vue
  • Get a UI component Instance in Vue
React
  • Get a UI component Instance in React

onItemClick

A function that is executed after a shape or connector is clicked.

Type:

Function

Function parameters:

Information about the event.

Object structure:
Name Type Description
component

Diagram

The UI component instance's name.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

item

dxDiagramItem

A dxDiagramItem object descendant (dxDiagramShape or dxDiagramConnector) related to the event.

Default Value: null

onItemDblClick

A function that is executed after a shape or connector is double-clicked.

Type:

Function

Function parameters:

Information about the event.

Object structure:
Name Type Description
component

Diagram

The UI component instance's name.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

item

dxDiagramItem

A dxDiagramItem object descendant (dxDiagramShape or dxDiagramConnector) related to the event.

Default Value: null

onOptionChanged

A function that is executed after a UI component property is changed.

Type:

Function

Function parameters:

Information about the event.

Object structure:
Name Type Description
value any

The modified property's new value.

previousValue any

The UI component's previous value.

name

String

The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into.

fullName

String

The path to the modified property that includes all parent properties.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

component

Diagram

The UI component's instance.

Default Value: null

The following example shows how to subscribe to component property changes:

jQuery
index.js
$(function() {
    $("#diagramContainer").dxDiagram({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-diagram ...
    (onOptionChanged)="handlePropertyChange($event)"> 
</dx-diagram>
import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    // ...
    handlePropertyChange(e) {
        if(e.name === "changedProperty") { 
            // handle the property change here
        }
    }
}
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxDiagramModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxDiagramModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }  
Vue
App.vue
<template> 
    <DxDiagram ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxDiagram from 'devextreme-vue/diagram'; 

export default { 
    components: { 
        DxDiagram
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script> 
React
App.js
import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import Diagram from 'devextreme-react/diagram'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <Diagram ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
} 

onRequestEditOperation

A function that allows you to prohibit an edit operation at run time.

Type:

Function

Function parameters:

Information about the event.

Object structure:
Name Type Description
allowed

Boolean

Specifies whether the edit operation is allowed. Default value: true.

args

dxDiagramAddShapeArgs

|

dxDiagramAddShapeFromToolboxArgs

|

dxDiagramDeleteShapeArgs

|

dxDiagramDeleteConnectorArgs

|

dxDiagramChangeConnectionArgs

|

dxDiagramChangeConnectorPointsArgs

|

dxDiagramBeforeChangeShapeTextArgs

|

dxDiagramChangeShapeTextArgs

|

dxDiagramBeforeChangeConnectorTextArgs

|

dxDiagramChangeConnectorTextArgs

|

dxDiagramResizeShapeArgs

|

dxDiagramMoveShapeArgs

An object that contains information about the processed shape or connector. The parameter's value type depends on the operation.

component

Diagram

The UI component instance's name.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

operation

String

The processed operation.

reason

RequestEditOperationReason

Identifies the reason why the event is raised.

Default Value: null

The operation parameter identifies the edit operation. Note that if an Allow{Operation} property is set to false, the event does not fire for this operation. The table below lists all available operations.

Operation User action / IU update operation causes the event to be raised
addShape A user is about to add a shape / The UI component determines the **Paste** command's visibility.
addShapeFromToolbox The UI component determines the visibility of a shape in the toolbox or context toolbox.
beforeChangeConnectorText A user is about to edit a connector's text.
beforeChangeShapeText A user is about to edit a shape's text.
changeConnection A user is about to link or delink a connector from a shape / The UI component determines a connection point's visibility.
changeConnectorPoints A user changed a connector's points.
changeConnectorText A user changed a connector's text.
changeShapeText A user changed a shape's text.
deleteConnector A user is about to delete a connector / The UI component determines the **Cut** and **Delete** commands' visibility.
deleteShape A user is about to delete a shape / The UI component determines the visibility of the **Cut** and **Delete** commands.
moveShape A user moved a shape.
resizeShape A user resized a shape.

For more information, refer to the following section: Prohibit Individual Operations

View Demo

When a user pastes or clones several items in a diagram, the control adds the items to the model one by one. For each added item, the RequestEditOperation event fires. In the event handler, you can access the processed item. However, if you call the getItemById(id) method to access an attached connector (see the attachedConnectorIds property) or a container's child item (see the containerChildItemIds property), you can get the undefinedresult if the item is not added to the model yet.

See Also

onRequestLayoutUpdate

A function that allows you to specify whether or not the UI component should reapply its auto layout after diagram data is reloaded.

Type:

Function

Function parameters:

Information about the event.

Object structure:
Name Type Description
allowed

Boolean

Specifies whether or not the diagram layout should be updated. Default value: false.

changes

Array<any>

The received changes.

component

Diagram

The UI component instance's name.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

Default Value: null

The autoLayout option specifies an auto-layout algorithm that the UI component uses to build a diagram on data binding.

Write the onRequestLayoutUpdate function to specify whether the component should reapply its auto layout when a user changes diagram data in the UI or you modify the data source directly via push services.

View Demo

onSelectionChanged

A function that is executed after the selection is changed in the Diagram.

Type:

Function

Function parameters:

Information about the event.

Object structure:
Name Type Description
component

Diagram

The UI component instance's name.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

items

Array<dxDiagramItem>

An array of selected items (DiagramShapes or DiagramConnectors).

Default Value: null

pageColor

Specifies the color of a diagram page.

Type:

String

Default Value: 'white'

The following color formats are available:

  • Longhand and shorthand hexadecimal notations. For example, "#3b3", "#31bb32".

  • RGB and RGBA formats. For example, "rgb(51,187,51)", "rgba(0,204,0,1)".

  • Named colors. For example, "darkturquoise".

NOTE
  • If you call the import method, it applies the imported page settings and the pageColor property is ignored.

  • Page settings are stored in a diagram model. The pageColor property is not in effect if the model is read-only (the readOnly property is set to true).

pageOrientation

Specifies the page orientation.

Default Value: 'portrait'

NOTE
  • If you call the import method, it applies the imported page settings and the pageOrientation property is ignored.

  • Page settings are stored in a diagram model. The pageOrientation property is not in effect if the model is read-only (the readOnly property is set to true).

pageSize

Specifies a size of pages.

Selector: PageSize
Type:

Object

The units property specifies the page's measurement units.

jQuery
JavaScript
$(function() {
    $("#diagram").dxDiagram({
        units: "cm",
        pageSize: {
            width: 10,
            height: 10,
        },
    });
});
Angular
app.component.html
+
<dx-diagram #diagram id="diagram" units="cm">
    <dxo-page-size [width]="10" [height]="10">
    </dxo-page-size>
</dx-diagram>
Vue
App.vue
<template>
<DxDiagram
    id="diagram"
    ref="diagram"
    units="cm"
>
    <DxPageSize
    :width="10"
    :height="10"
    />
</DxDiagram>
</template>
React
App.js
class App extends React.Component {
    // ...
    render() {
        return (
            <Diagram id="diagram" ref={this.diagramRef} units="cm">
                <PageSize width={10} height={10} />
            </Diagram>
        );
    }
}
NOTE
  • If you call the import method, it applies the imported page settings and the pageSize property is ignored.

  • Page settings are stored in a diagram model. The pageSize property is not in effect if the model is read-only (the readOnly property is set to true).

propertiesPanel

Configures the Properties panel settings.

Selector: PropertiesPanel
Type:

Object

Default Value: {}

readOnly

Specifies whether the diagram is read-only.

Type:

Boolean

Default Value: false

Set the readOnly property to true to prohibit users from editing the diagram.

View Demo

NOTE
Diagram page settings are stored in a diagram model. When the readOnly property is set to true, the model can not be modified and page settings (pageColor, pageOrientation, and pageSize) are not in effect.

rtlEnabled

Switches the UI component to a right-to-left representation.

Type:

Boolean

Default Value: false

When this property is set to true, the UI component 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
});

DataGrid Demo Navigation UI Demo Editors Demo

showGrid

Specifies whether grid lines are visible.

Type:

Boolean

Default Value: true

See Also

simpleView

Switch the Diagram UI component to simple view mode.

Type:

Boolean

Default Value: false

In simple view mode, the control does not divide the work area into pages and the diagram's content occupies all the available area inside the component.

View Demo

snapToGrid

Specifies whether diagram elements should snap to grid lines.

Type:

Boolean

Default Value: true

See Also

toolbox

Configures the toolbox settings.

Selector: Toolbox
Type:

Object

Default Value: {}

View Demo

The toolbox contains groups of shapes. Use this property to access the toolbox settings.

Diagram toolbox

units

Specifies the measurement unit for size properties.

Type:

Units

Default Value: 'in'

The units property specifies the unit for measurements in a diagram, for instance, defaultHeight (custom shape properties), gridSize (grid properties), or leftExpr (node and edge data-bound settings).

User interface elements display measurements in viewUnits.

When you export a diagram, the component saves the diagram's data in its own text format. The resulting JSON object contains measurements in twips, regardless of the units or viewUnits property values. Do not modify this JSON object because modified data can load incorrectly.

useNativeScrolling

Specifies whether or not the UI component uses native scrolling.

Type:

Boolean

Default Value: true, false (desktop except Mac)

viewToolbar

Configures the view toolbar settings.

Selector: ViewToolbar
Type:

Object

Default Value: {}

viewUnits

Specifies the measurement unit that is displayed in user interface elements.

Type:

Units

Default Value: 'in'

The viewUnits property specifies the measurement unit in Properties panel and in the Diagram work area.

Diagram viewUnits

Use the units property specifies the unit for measurements in a diagram, for instance, defaultHeight (custom shape properties), gridSize (grid properties), or leftExpr (node and edge data-bound settings).

When you export a diagram, the component saves the diagram's data in its own text format. The resulting JSON object contains measurements in twips, regardless of the units or viewUnits property values. Do not modify this JSON object because modified data can load incorrectly.

visible

Specifies whether the UI component is visible.

Type:

Boolean

Default Value: true

width

Specifies the UI component's width.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The UI component's width.

Default Value: undefined

This property accepts a value of one of the following types:

  • Number
    The width in pixels.

  • String
    A CSS-accepted measurement of width. For example, "55px", "20vw", "80%", "auto", "inherit".

  • Function (deprecated since v21.2)
    Refer to the W0017 warning description for information on how you can migrate to viewport units.

zoomLevel

Specifies the zoom level.

Selector: ZoomLevel
Type:

Number

|

Object

Default Value: 1

jQuery
JavaScript
$(function() {
    $("#diagram").dxDiagram({
        zoomLevel: {
            value: 0.75,
            items: [0.5, 0.75, 1, 1.5]
        },
    });
});
Angular
app.component.html
+
<dx-diagram #diagram id="diagram">
    <dxo-zoom-level 
        [value]="0.75" 
        [items]='[0.5, 0.75, 1, 1.5]'>
    </dxo-zoom-level>
</dx-diagram>
Vue
App.vue
<template>
<DxDiagram
    id="diagram"
    ref="diagram"
>
    <DxZoomLevel
    :value="0.75"
    :items="['0.5', '0.75', '1', '1.5']"
    />
</DxDiagram>
</template>
React
App.js
class App extends React.Component {
    // ...
    render() {
        return (
            <Diagram id="diagram" ref={this.diagramRef} >
                <ZoomLevel value={0.75} items={['0.5', '0.75', '1', '1.5']}/>
            </Diagram>
        );
    }
}