Vue Diagram - 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 property when the UI component 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 property when the UI component 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 property when the UI component 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.