All docs
V21.2
24.2
24.1
23.2
23.1
22.2
22.1
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.
A newer version of this page is available. Switch to the current version.

JavaScript/jQuery Diagram - DiagramShape

An object that provides information about a shape in the Diagram UI component.

import { dxDiagramShape } from "devextreme/ui/diagram"

attachedConnectorIds

Gets an array of attached connector identifiers.

Type:

Array<String>

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, you can get the undefinedresult if the item is not added to the model yet.

containerChildItemIds

Gets identifiers of shapes stored in the container.

Type:

Array<String>

Use the containerChildItemIds property to get identifiers of shapes stored in a horizontalContainer or verticalContainer shape. If the container stores no shapes or the shape is not a container, the property returns an empty string

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 a container's child item, you can get the undefinedresult if the item is not added to the model yet.

containerExpanded

Gets whether the container is expanded.

Type:

Boolean

This property is in effect for horizontalContainer or verticalContainer shapes. If the shape is not a container, its containerExpanded property always returns true.

containerId

Gets the identifier of the container that stores the shape.

Type:

String

Use the containerId property to get the identifier of the container (a shape of the horizontalContainer or verticalContainer type) that stores the shape. The containerChildItemIds property allows you to get identifiers of shapes stored in the container.

dataItem

Returns the data item that is bound to the diagram item.

Type: any

id

Specifies the item's internal identifier.

Type:

String

itemType

Returns the type of the item.

Type:

String

Accepted Values: 'shape' | 'connector'

key

Gets the item's key from a data source.

Type:

Object

If a user removes an item and then undoes the action, the Diagram inserts the item back and generates a new GUID for its key value. A new GUID is also generated for pasted and cloned items. If you specify key values (IDs in a data source) manually, subscribe to the onInserting data source event to assign the values.

position

Specifies the position of the top left shape corner relative to the top left corner of the diagram work area.

Type:

Object

Diagram control

size

Specifies the shape size.

Type:

Object

text

Specifies the shape's text.

Type:

String

type

Specifies the shape type. The built-in shape types are shown in the Shape Types section.

Type:

String

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'