Class Diagram
Inheritance
System.Object
Diagram
Assembly: Syncfusion.EJ2.dll
Syntax
public class Diagram : EJTagHelper
Constructors
Diagram()
Declaration
Properties
AddInfo
Allows the user to save custom information/data about diagram
Declaration
public object AddInfo { get; set; }
Property Value
Type |
Description |
System.Object |
|
AnimationComplete
Triggers after animation is completed for the diagram elements.
Declaration
public string AnimationComplete { get; set; }
Property Value
Type |
Description |
System.String |
|
AnnotationTemplate
Customizes the annotation template
Declaration
public string AnnotationTemplate { get; set; }
Property Value
Type |
Description |
System.String |
|
BackgroundColor
Defines the background color of the diagram
Declaration
public string BackgroundColor { get; set; }
Property Value
Type |
Description |
System.String |
|
BridgeDirection
Defines the direction of the bridge that is inserted when the segments are intersected
Top - Defines the direction of the bridge as Top
Bottom - Defines the direction of the bridge as Bottom
Left - Sets the bridge direction as left
Right - Sets the bridge direction as right
Declaration
public BridgeDirection BridgeDirection { get; set; }
Property Value
ClassName
Declaration
protected override string ClassName { get; }
Property Value
Type |
Description |
System.String |
|
Overrides
Click
Triggers when a node, connector or diagram is clicked
Declaration
public string Click { get; set; }
Property Value
Type |
Description |
System.String |
|
CollectionChange
Triggers when a node/connector is added/removed to/from the diagram.
Declaration
public string CollectionChange { get; set; }
Property Value
Type |
Description |
System.String |
|
CommandExecute
Triggers when a command executed.
Declaration
public string CommandExecute { get; set; }
Property Value
Type |
Description |
System.String |
|
CommandManager
Defines a set of custom commands and binds them with a set of desired key gestures
Declaration
public DiagramCommandManager CommandManager { get; set; }
Property Value
ConnectionChange
Triggers when the connection is changed
Declaration
public string ConnectionChange { get; set; }
Property Value
Type |
Description |
System.String |
|
ConnectorDefaults
Helps to assign the default properties of connector
Declaration
public object ConnectorDefaults { get; set; }
Property Value
Type |
Description |
System.Object |
|
Connectors
Defines a collection of objects, used to create link between two points, nodes or ports to represent the relationships between them
Declaration
public List<DiagramConnector> Connectors { get; set; }
Property Value
Constraints
Constraints are used to enable/disable certain behaviors of the diagram.
None - Disables DiagramConstraints constraints
Bridging - Enables/Disables Bridging support for connector
UndoRedo - Enables/Disables the Undo/Redo support
Tooltip - Enables/Disables Tooltip support
UserInteraction - Enables/Disables editing diagram interactively
ApiUpdate - Enables/Disables editing diagram through code
PageEditable - Enables/Disables editing diagrams both interactively and through code
Zoom - Enables/Disables Zoom support for the diagram
PanX - Enables/Disable PanX support for the diagram
PanY - Enables/Disable PanY support for the diagram
Pan - Enables/Disable Pan support the diagram
Declaration
public DiagramConstraints Constraints { get; set; }
Property Value
Triggers before rendering the context menu item
Declaration
public string ContextMenuBeforeItemRender { get; set; }
Property Value
Type |
Description |
System.String |
|
Triggers when a context menu item is clicked
Declaration
public string ContextMenuClick { get; set; }
Property Value
Type |
Description |
System.String |
|
Triggers before opening the context menu
Declaration
public string ContextMenuOpen { get; set; }
Property Value
Type |
Description |
System.String |
|
Defines type of menu that appears when you perform right-click operation
An object to customize the context menu of diagram
Declaration
public DiagramContextMenuSettings ContextMenuSettings { get; set; }
Property Value
Created
Triggered when the diagram is rendered completely.
Declaration
public string Created { get; set; }
Property Value
Type |
Description |
System.String |
|
CustomCursor
A collection of JSON objects where each object represents a custom cursor action. Layer is a named category of diagram shapes.
Declaration
public List<DiagramCustomCursor> CustomCursor { get; set; }
Property Value
DataLoaded
Triggers after diagram is populated from the external data source
Declaration
public string DataLoaded { get; set; }
Property Value
Type |
Description |
System.String |
|
DataSourceSettings
Configures the data source that is to be bound with diagram
Declaration
public DiagramDataSource DataSourceSettings { get; set; }
Property Value
DiagramSettings
Represents the diagram settings
Declaration
public object DiagramSettings { get; set; }
Property Value
Type |
Description |
System.Object |
|
DoubleClick
Triggers when a node, connector or diagram model is clicked twice
Declaration
public string DoubleClick { get; set; }
Property Value
Type |
Description |
System.String |
|
DragEnter
Triggers when a symbol is dragged into diagram from symbol palette
Declaration
public string DragEnter { get; set; }
Property Value
Type |
Description |
System.String |
|
DragLeave
Triggers when a symbol is dragged outside of the diagram.
Declaration
public string DragLeave { get; set; }
Property Value
Type |
Description |
System.String |
|
DragOver
Triggers when a symbol is dragged over diagram
Declaration
public string DragOver { get; set; }
Property Value
Type |
Description |
System.String |
|
DrawingObject
Defines the object to be drawn using drawing tool
Declaration
public object DrawingObject { get; set; }
Property Value
Type |
Description |
System.Object |
|
Drop
Triggers when a symbol is dragged and dropped from symbol palette to drawing area
Declaration
public string Drop { get; set; }
Property Value
Type |
Description |
System.String |
|
EnablePersistence
Enable or disable persisting component's state between page reloads.
Declaration
public bool EnablePersistence { get; set; }
Property Value
Type |
Description |
System.Boolean |
|
EnableRtl
Enable or disable rendering component in right to left direction.
Declaration
public bool EnableRtl { get; set; }
Property Value
Type |
Description |
System.Boolean |
|
ExpandStateChange
Triggers when the state of the expand and collapse icon change for a node.
Declaration
public string ExpandStateChange { get; set; }
Property Value
Type |
Description |
System.String |
|
FixedUserHandleClick
Triggers when a node/connector fixedUserHandle is clicked in the diagram.
Declaration
public string FixedUserHandleClick { get; set; }
Property Value
Type |
Description |
System.String |
|
GetConnectorDefaults
Helps to return the default properties of connector
Declaration
public object GetConnectorDefaults { get; set; }
Property Value
Type |
Description |
System.Object |
|
GetCustomCursor
Declaration
public object GetCustomCursor { get; set; }
Property Value
Type |
Description |
System.Object |
|
GetCustomProperty
Allows to get the custom properties that have to be serialized
Declaration
public object GetCustomProperty { get; set; }
Property Value
Type |
Description |
System.Object |
|
Declaration
public object GetCustomTool { get; set; }
Property Value
Type |
Description |
System.Object |
|
GetDescription
Declaration
public object GetDescription { get; set; }
Property Value
Type |
Description |
System.Object |
|
GetNodeDefaults
Helps to return the default properties of node
Declaration
public object GetNodeDefaults { get; set; }
Property Value
Type |
Description |
System.Object |
|
Height
Defines the height of the diagram model.
Declaration
public string Height { get; set; }
Property Value
Type |
Description |
System.String |
|
HistoryChange
Triggers when a change is reverted or restored(undo/redo)
Declaration
public string HistoryChange { get; set; }
Property Value
Type |
Description |
System.String |
|
HistoryManager
Customizes the undo redo functionality
Declaration
public object HistoryManager { get; set; }
Property Value
Type |
Description |
System.Object |
|
HistoryStateChange
Triggers when a custom entry change is reverted or restored(undo/redo)
Declaration
public string HistoryStateChange { get; set; }
Property Value
Type |
Description |
System.String |
|
HtmlAttributes
Allows additional HTML attributes such as title, name, etc., and
accepts n number of attributes in a key-value pair format.
Declaration
public object HtmlAttributes { get; set; }
Property Value
Type |
Description |
System.Object |
|
IsFor
Declaration
protected override bool IsFor { get; }
Property Value
Type |
Description |
System.Boolean |
|
Overrides
KeyDown
Triggers when a user is pressing a key.
Declaration
public string KeyDown { get; set; }
Property Value
Type |
Description |
System.String |
|
KeyUp
Triggers when a user releases a key.
Declaration
public string KeyUp { get; set; }
Property Value
Type |
Description |
System.String |
|
Layers
A collection of JSON objects where each object represents a layer. Layer is a named category of diagram shapes.
Declaration
public List<DiagramLayer> Layers { get; set; }
Property Value
Type |
Description |
System.Collections.Generic.List<DiagramLayer> |
|
Layout
Layout is used to auto-arrange the nodes in the Diagram area
Declaration
public DiagramLayout Layout { get; set; }
Property Value
Locale
Overrides the global culture and localization value for this component. Default global culture is 'en-US'.
Declaration
public string Locale { get; set; }
Property Value
Type |
Description |
System.String |
|
Mode
Defines the diagram rendering mode.
SVG - Renders the diagram objects as SVG elements
Canvas - Renders the diagram in a canvas
Declaration
public RenderingMode Mode { get; set; }
Property Value
MouseEnter
Triggered when mouse enters a node/connector.
Declaration
public string MouseEnter { get; set; }
Property Value
Type |
Description |
System.String |
|
MouseLeave
Triggered when mouse leaves node/connector.
Declaration
public string MouseLeave { get; set; }
Property Value
Type |
Description |
System.String |
|
MouseOver
Triggered when mouse hovers a node/connector.
Declaration
public string MouseOver { get; set; }
Property Value
Type |
Description |
System.String |
|
NameSpace
Declaration
protected override string NameSpace { get; }
Property Value
Type |
Description |
System.String |
|
Overrides
NodeDefaults
Helps to assign the default properties of nodes
Declaration
public object NodeDefaults { get; set; }
Property Value
Type |
Description |
System.Object |
|
Nodes
Defines the collection of nodes
Declaration
public List<DiagramNode> Nodes { get; set; }
Property Value
Type |
Description |
System.Collections.Generic.List<DiagramNode> |
|
NodeTemplate
Customizes the node template
Declaration
public string NodeTemplate { get; set; }
Property Value
Type |
Description |
System.String |
|
OnImageLoad
Triggers when the image node is loaded.
Declaration
public string OnImageLoad { get; set; }
Property Value
Type |
Description |
System.String |
|
OnUserHandleMouseDown
Triggers when a mouseDown on the user handle.
Declaration
public string OnUserHandleMouseDown { get; set; }
Property Value
Type |
Description |
System.String |
|
OnUserHandleMouseEnter
Triggers when a mouseEnter on the user handle.
Declaration
public string OnUserHandleMouseEnter { get; set; }
Property Value
Type |
Description |
System.String |
|
OnUserHandleMouseLeave
Triggers when a mouseLeave on the user handle.
Declaration
public string OnUserHandleMouseLeave { get; set; }
Property Value
Type |
Description |
System.String |
|
OnUserHandleMouseUp
Triggers when a mouseUp on the user handle.
Declaration
public string OnUserHandleMouseUp { get; set; }
Property Value
Type |
Description |
System.String |
|
PageSettings
Page settings enable to customize the appearance, width, and height of the Diagram page.
Declaration
public DiagramPageSettings PageSettings { get; set; }
Property Value
PositionChange
Triggers while dragging the elements in diagram
Declaration
public string PositionChange { get; set; }
Property Value
Type |
Description |
System.String |
|
PropertyChange
Triggers once the node or connector property changed.
Declaration
public string PropertyChange { get; set; }
Property Value
Type |
Description |
System.String |
|
RotateChange
Triggers when the diagram elements are rotated
Declaration
public string RotateChange { get; set; }
Property Value
Type |
Description |
System.String |
|
RulerSettings
Defines the properties of both horizontal and vertical guides/rulers to measure the diagram area.
Declaration
public DiagramRulerSettings RulerSettings { get; set; }
Property Value
Triggers when the diagram is zoomed or panned
Declaration
public string ScrollChange { get; set; }
Property Value
Type |
Description |
System.String |
|
Defines the current zoom value, zoom factor, scroll status and view port size of the diagram
Declaration
public DiagramScrollSettings ScrollSettings { get; set; }
Property Value
SegmentCollectionChange
Triggers when a segment is added/removed to/from the connector.
Declaration
public string SegmentCollectionChange { get; set; }
Property Value
Type |
Description |
System.String |
|
SelectedItems
Defines the collection of selected items, size and position of the selector
Declaration
public DiagramSelector SelectedItems { get; set; }
Property Value
SelectionChange
Triggers when the selection is changed in diagram
Declaration
public string SelectionChange { get; set; }
Property Value
Type |
Description |
System.String |
|
SerializationSettings
Defines the serialization settings of diagram.
Declaration
public DiagramSerializationSettings SerializationSettings { get; set; }
Property Value
SetNodeTemplate
setNodeTemplate helps to customize the content of a node
function setNodeTemplate() {
setNodeTemplate: (obj: NodeModel, diagram: Diagram): StackPanel => {
if (obj.id === 'node2') {
let table: StackPanel = new StackPanel();
table.orientation = 'Horizontal';
let column1: StackPanel = new StackPanel();
column1.children = [];
column1.children.push(getTextElement('Column1'));
addRows(column1);
let column2: StackPanel = new StackPanel();
column2.children = [];
column2.children.push(getTextElement('Column2'));
addRows(column2);
table.children = [column1, column2];
return table;
}
return null;
}
...
}
Declaration
public object SetNodeTemplate { get; set; }
Property Value
Type |
Description |
System.Object |
|
SizeChange
Triggers when a node is resized
Declaration
public string SizeChange { get; set; }
Property Value
Type |
Description |
System.String |
|
SnapSettings
Defines the gridlines and defines how and when the objects have to be snapped
Declaration
public DiagramSnapSettings SnapSettings { get; set; }
Property Value
SourcePointChange
Triggers when the connector's source point is changed
Declaration
public string SourcePointChange { get; set; }
Property Value
Type |
Description |
System.String |
|
TagName
Declaration
protected override string TagName { get; }
Property Value
Type |
Description |
System.String |
|
Overrides
TargetPointChange
Triggers when the connector's target point is changed
Declaration
public string TargetPointChange { get; set; }
Property Value
Type |
Description |
System.String |
|
TextEdit
Triggers when editor got focus at the time of node’s label or text node editing.
Declaration
public string TextEdit { get; set; }
Property Value
Type |
Description |
System.String |
|
Defines the precedence of the interactive tools. They are,
None - Disables selection, zooming and drawing tools
SingleSelect - Enables/Disables single select support for the diagram
MultipleSelect - Enables/Disable MultipleSelect select support for the diagram
ZoomPan - Enables/Disable ZoomPan support for the diagram
DrawOnce - Enables/Disable ContinuousDraw support for the diagram
ContinuousDraw - Enables/Disable ContinuousDraw support for the diagram
Declaration
public DiagramTools Tool { get; set; }
Property Value
Defines the tooltip that should be shown when the mouse hovers over a node or connector
An object that defines the description, appearance and alignments of tooltip
Declaration
public DiagramDiagramTooltip Tooltip { get; set; }
Property Value
UpdateSelection
Helps to set the undo and redo node selection
Declaration
public object UpdateSelection { get; set; }
Property Value
Type |
Description |
System.Object |
|
UserHandleTemplate
This property represents the template content of a user handle. The user can define any HTML element as a template.
Declaration
public string UserHandleTemplate { get; set; }
Property Value
Type |
Description |
System.String |
|
Width
Defines the width of the diagram model.
Declaration
public string Width { get; set; }
Property Value
Type |
Description |
System.String |
|