All docs
V20.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.
Vue

contextToolbox

Configures the context toolbox's settings.

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

category

Specifies the category of shapes that are displayed in the context toolbox.

Type:

String

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

The category property is not in effect if the shapes property is specified.

Use the DiagramShapeCategory enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: General, Flowchart, OrgChart, Containers, Custom.

displayMode

Specifies how shapes are displayed in the context toolbox.

Type:

String

Accepted Values: 'icons' | 'texts'

Use the DiagramToolboxDisplayMode enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Icons, Texts.

enabled

Specifies the context toolbox's availability.

Type:

Boolean

Default Value: true

shapes

Lists the shapes that are displayed in the context toolbox. The built-in shape types are shown in the Shape Types section.

Type:

Array<String>

|

Array<String>

Accepted Values: 'text' | 'rectangle' | 'ellipse' | 'cross' | 'triangle' | 'diamond' | 'heart' | 'pentagon' | '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'

Use the DiagramShapeType enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Text, Rectangle, Ellipse, Cross, Triangle, Diamond, Heart, Pentagon, 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.