Diagram
The Diagram UI component provides a visual interface to help you design new and modify existing diagrams.
See Also
- Set Up DevExtreme: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
Configuration
| Name | Description |
|---|---|
| autoZoomMode |
Specifies how the Diagram UI component automatically zooms the work area. |
| contextMenu |
Configures the context menu's settings. |
| contextToolbox |
Configures the context toolbox's settings. |
| customShapeComponent |
An alias for the customShapeTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| customShapeRender |
An alias for the customShapeTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| customShapes |
Provide access to an array of custom shapes. |
| customShapeTemplate |
Specifies a custom template for shapes. |
| customShapeToolboxComponent |
An alias for the customShapeToolboxTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| customShapeToolboxRender |
An alias for the customShapeToolboxTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| customShapeToolboxTemplate |
Specifies a custom template for shapes in the toolbox. |
| defaultItemProperties |
Configures default item properties. |
| disabled |
Specifies whether the UI component responds to user interaction. |
| edges |
Allows you to bind the collection of diagram edges to a data source. For more information, see the Data Binding section. |
| editing |
Specifies which editing operations a user can perform. |
| elementAttr |
Specifies the global attributes to be attached to the UI component's container element. |
| export |
Configures export settings. |
| fullScreen |
Specifies whether or not to display the UI component in full-screen mode. |
| gridSize |
Specifies the grid pitch. |
| hasChanges |
Indicates whether diagram content has been changed. |
| height |
Specifies the UI component's height. |
| historyToolbar |
Configures the history toolbar's settings. |
| mainToolbar |
Configures the main toolbar settings. |
| nodes |
Allows you to bind the collection of diagram nodes to a data source. For more information, see the Data Binding section. |
| onContentReady |
A function that is executed when the UI component's content is ready and each time the content is changed. |
| onCustomCommand |
A function that is executed after a custom command item was clicked and allows you to implement the custom command's logic. |
| onDisposing |
A function that is executed before the UI component is disposed of. |
| onInitialized |
A function used in JavaScript frameworks to save the UI component instance. |
| onItemClick |
A function that is executed after a shape or connector is clicked. |
| onItemDblClick |
A function that is executed after a shape or connector is double-clicked. |
| onOptionChanged |
A function that is executed after a UI component property is changed. |
| onRequestEditOperation |
A function that allows you to prohibit an edit operation at run time. |
| onRequestLayoutUpdate |
The Diagram UI component reloads the modified diagram data every time the data source changes. The onRequestLayoutUpdate function is executed after diagram data is reloaded and allows you to specify whether or not the UI component should update the diagram layout. |
| onSelectionChanged |
A function that is executed after the selection is changed in the Diagram. |
| pageColor |
Specifies the color of a diagram page. |
| pageOrientation |
Specifies the page orientation. |
| pageSize |
Specifies a size of pages. |
| propertiesPanel |
Configures the Properties panel settings. |
| readOnly |
Specifies whether the diagram is read-only. |
| rtlEnabled |
Switches the UI component to a right-to-left representation. |
| showGrid |
Specifies whether grid lines are visible. |
| simpleView |
Switch the Diagram UI component to simple view mode. |
| snapToGrid |
Specifies whether diagram elements should snap to grid lines. |
| toolbox |
Configures the toolbox settings. |
| units |
Specifies the unit for measurement properties (for example, defaultHeight, gridSize, leftExpr). |
| viewToolbar |
Configures the view toolbar settings. |
| viewUnits |
Specifies the measurement unit that is displayed in user interface elements. |
| visible |
Specifies whether the UI component is visible. |
| width |
Specifies the UI component's width. |
| zoomLevel |
Specifies the zoom level. |
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
Methods
| Name | Description |
|---|---|
| beginUpdate() |
Prevents the UI component from refreshing until the endUpdate() method is called. |
| defaultOptions(rule) |
Specifies the device-dependent default configuration properties for this component. |
| dispose() |
Disposes of all the resources allocated to the Diagram instance. |
| element() |
Gets the root UI component element. |
| endUpdate() |
Refreshes the UI component after a call of the beginUpdate() method. |
| export() |
Exports the diagram data to a JSON object. |
| exportTo(format, callback) |
Exports the diagram to an image format. |
| focus() |
Sets focus on the UI component. |
| getEdgeDataSource() |
Returns the DataSource instance. |
| getInstance(element) |
Gets the instance of a UI component found using its DOM node. |
| getItemById(id) |
Returns a shape or connector object specified by its internal identifier. |
| getItemByKey(key) | |
| getNodeDataSource() |
Gets the DataSource instance. |
| import(data, updateExistingItemsOnly) |
Imports the diagram data. |
| instance() |
Gets the UI component's instance. Use it to access other methods of the UI component. |
| off(eventName) |
Detaches all event handlers from a single event. |
| off(eventName, eventHandler) |
Detaches a particular event handler from a single event. |
| on(eventName, eventHandler) |
Subscribes to an event. |
| on(events) |
Subscribes to events. |
| option() |
Gets all UI component properties. |
| option(optionName) |
Gets the value of a single property. |
| option(optionName, optionValue) |
Updates the value of a single property. |
| option(options) |
Updates the values of several properties. |
| repaint() |
Repaints the UI component without reloading data. Call it to update the UI component's markup. |
| resetOption(optionName) |
Resets an property to its default value. |
| updateToolbox() |
Updates the diagram toolboxes. |
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
Events
| Name | Description |
|---|---|
| contentReady |
Raised when the UI component's content is ready. |
| customCommand |
Raised after a custom command item was clicked and allows you to implement custom command logic. |
| disposing |
Raised before the UI component is disposed of. |
| initialized |
Raised only once, after the UI component is initialized. |
| itemClick |
Raised after a shape or connector is clicked. |
| itemDblClick |
Raised after a shape or connector is double-clicked. |
| optionChanged |
Raised after a UI component property is changed. |
| requestEditOperation |
Raised before a user edits a diagram and before the UI related to an edit operation is updated. Requests clarification about edit operation availability. |
| requestLayoutUpdate |
Raised after diagram data has been changed and requests whether the UI component should update the diagram layout. |
| selectionChanged |
Raised after the selection is changed in the Diagram. |
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core