React Diagram - toolbox.groups

Lists toolbox groups.

Type:

Array<Object>

|

Array<String>

Default Value: undefined
Accepted Values: 'general' | 'flowchart' | 'orgChart' | 'containers' | 'custom'

View Demo

Use the groups property to customize the toolbox's content. You can populate it with default or custom groups.

category

Specifies the category of shapes that are displayed in the group.

Type:

String

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

View Demo

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 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.

expanded

Specifies whether the group is expanded.

Type:

Boolean

shapes

Lists the shapes in the group. 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.

title

Specifies the group title in the toolbox.

Type:

String