All docs
V23.2
24.1
23.2
23.1
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

jQuery Diagram Types

ContentReadyEvent

The type of the contentReady event handler's argument.

import { ContentReadyEvent } from "devextreme/ui/diagram"
Type:

Object

CustomCommandEvent

The type of the customCommand event handler's argument.

import { CustomCommandEvent } from "devextreme/ui/diagram"
Type:

Object

DiagramAutoZoomMode

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

Accepted Values: 'fitContent' | 'fitWidth' | 'disabled'

DiagramCommand

Specifies the Diagram command's identifier.

Accepted Values: 'separator' | 'exportSvg' | 'exportPng' | 'exportJpg' | 'undo' | 'redo' | 'cut' | 'copy' | 'paste' | 'selectAll' | 'delete' | 'fontName' | 'fontSize' | 'bold' | 'italic' | 'underline' | 'fontColor' | 'lineStyle' | 'lineWidth' | 'lineColor' | 'fillColor' | 'textAlignLeft' | 'textAlignCenter' | 'textAlignRight' | 'lock' | 'unlock' | 'sendToBack' | 'bringToFront' | 'insertShapeImage' | 'editShapeImage' | 'deleteShapeImage' | 'connectorLineType' | 'connectorLineStart' | 'connectorLineEnd' | 'layoutTreeTopToBottom' | 'layoutTreeBottomToTop' | 'layoutTreeLeftToRight' | 'layoutTreeRightToLeft' | 'layoutLayeredTopToBottom' | 'layoutLayeredBottomToTop' | 'layoutLayeredLeftToRight' | 'layoutLayeredRightToLeft' | 'fullScreen' | 'zoomLevel' | 'showGrid' | 'snapToGrid' | 'gridSize' | 'units' | 'pageSize' | 'pageOrientation' | 'pageColor' | 'simpleView' | 'toolbox'

DiagramConnectorLineEnd

Specifies the default tip of a connector's start/end point.

Accepted Values: 'none' | 'arrow' | 'outlinedTriangle' | 'filledTriangle'

DiagramConnectorLineType

Specifies the default type of a connector.

Accepted Values: 'straight' | 'orthogonal'

DiagramConnectorPosition

The position of the connector in the processed point.

Accepted Values: 'start' | 'end'

DiagramDataLayoutType

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

Accepted Values: 'auto' | 'off' | 'tree' | 'layered'

DiagramExportFormat

Exports the diagram to an image format.

Accepted Values: 'svg' | 'png' | 'jpg'

DiagramItemType

Returns the type of the item.

Accepted Values: 'shape' | 'connector'

DiagramModelOperation

Specifies the edit operation.

Accepted Values: 'addShape' | 'addShapeFromToolbox' | 'deleteShape' | 'deleteConnector' | 'changeConnection' | 'changeConnectorPoints' | 'beforeChangeShapeText' | 'changeShapeText' | 'beforeChangeConnectorText' | 'changeConnectorText' | 'resizeShape' | 'moveShape'

DiagramPanelVisibility

Specifies the panel's visibility.

Accepted Values: 'auto' | 'visible' | 'collapsed' | 'disabled'

DiagramRequestEditOperationReason

Specifies the reason to request edit operation.

Accepted Values: 'checkUIElementAvailability' | 'modelModification'

DiagramShapeCategory

Specifies the category of shapes.

Accepted Values: 'general' | 'flowchart' | 'orgChart' | 'containers' | 'custom'

DiagramShapeType

The type of the processed shape.

Accepted Values: 'text' | 'rectangle' | 'ellipse' | 'cross' | 'triangle' | 'diamond' | 'heart' | 'pentagon' | 'hexagon' | 'octagon' | 'star' | 'arrowLeft' | 'arrowTop' | 'arrowRight' | 'arrowBottom' | 'arrowNorthSouth' | 'arrowEastWest' | 'process' | 'decision' | 'terminator' | 'predefinedProcess' | 'document' | 'multipleDocuments' | 'manualInput' | 'preparation' | 'data' | 'database' | 'hardDisk' | 'internalStorage' | 'paperTape' | 'manualOperation' | 'delay' | 'storedData' | 'display' | 'merge' | 'connector' | 'or' | 'summingJunction' | 'verticalContainer' | 'horizontalContainer' | 'cardWithImageOnLeft' | 'cardWithImageOnTop' | 'cardWithImageOnRight'

DiagramToolboxDisplayMode

Specifies how shapes are displayed in the toolbox.

Accepted Values: 'icons' | 'texts'

DiagramUnits

Specifies the measurement unit for size properties.

Accepted Values: 'in' | 'cm' | 'px'

DisposingEvent

The type of the disposing event handler's argument.

import { DisposingEvent } from "devextreme/ui/diagram"
Type:

Object

InitializedEvent

The type of the initialized event handler's argument.

import { InitializedEvent } from "devextreme/ui/diagram"
Type:

Object

ItemClickEvent

The type of the itemClick event handler's argument.

import { ItemClickEvent } from "devextreme/ui/diagram"
Type:

Object

ItemDblClickEvent

The type of the itemDblClick event handler's argument.

import { ItemDblClickEvent } from "devextreme/ui/diagram"
Type:

Object

OptionChangedEvent

The type of the optionChanged event handler's argument.

import { OptionChangedEvent } from "devextreme/ui/diagram"
Type:

Object

RequestEditOperationEvent

The type of the requestEditOperation event handler's argument.

import { RequestEditOperationEvent } from "devextreme/ui/diagram"
Type:

Object

RequestLayoutUpdateEvent

The type of the requestLayoutUpdate event handler's argument.

import { RequestLayoutUpdateEvent } from "devextreme/ui/diagram"
Type:

Object

SelectionChangedEvent

The type of the selectionChanged event handler's argument.

import { SelectionChangedEvent } from "devextreme/ui/diagram"
Type:

Object