NOTE
Syncfusion recommends using Blazor Diagram Component which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future.
Events in Blazor Diagram Component
15 Dec 202219 minutes to read
Created
Triggered when the diagram is rendered completely.
@using Syncfusion.Blazor.Diagrams
<SfDiagram Width="1000px" Height="600px">
<DiagramEvents Created="Created"></DiagramEvents>
</SfDiagram>
@code
{
public void Created()
{
//Action to be performed.
}
}
NOTE
A new blazor diagram component which provides better performance than the existing diagram control in Blazor WebAssembly App. It is available in preview mode. Refer the Link
Clicked
Triggers when a node, connector, or diagram is clicked.
Argument Name | Description |
---|---|
Element | Returns the object that is clicked or id of the diagram. |
Position | Returns the object position that is actually clicked. |
Count | Returns the number of times clicked. |
ActualObject | Returns the actual object that is clicked or id of the diagram. |
Button | Returns the button clicked. |
@using Syncfusion.Blazor.Diagrams
<SfDiagram Width="1000px" Height="600px">
<DiagramEvents Clicked="Clicked"></DiagramEvents>
</SfDiagram>
@code
{
public void Clicked(IBlazorClickEventArgs args)
{
//Action to be performed.
}
}
ContextMenuItemClicked
Triggers when a context menu item is clicked.
Argument Name | Description |
---|---|
Element | Returns the object that is clicked. |
Item | Returns the actual object that is clicked. |
Name | Returns the name of the object that is clicked. |
Cancel | Returns whether to cancel the change or not. |
@using Syncfusion.Blazor.Diagrams
<SfDiagram Width="1000px" Height="600px">
<DiagramEvents ContextMenuItemClicked="ContextMenuItemClicked"></DiagramEvents>
</SfDiagram>
@code
{
public void ContextMenuItemClicked(DiagramMenuEventArgs args)
{
//Action to be performed.
}
}
OnContextMenuOpen
Triggers before opening the context menu.
Argument Name | Description |
---|---|
Cancel | Returns whether to cancel the change or not. |
Element | Returns the object that is clicked. |
HiddenItems | Defines the hidden items of the diagram context menu. |
Items | Defines the items of the diagram context menu. |
@using Syncfusion.Blazor.Diagrams
<SfDiagram Width="1000px" Height="600px">
<DiagramEvents OnContextMenuOpen="OnContextMenuOpen"></DiagramEvents>
</SfDiagram>
@code
{
public void OnContextMenuOpen(DiagramBeforeMenuOpenEventArgs args)
{
//Action to be performed.
}
}
DataLoaded
Triggers after the diagram is are populated from the external data source
Argument Name | Description |
---|---|
Diagram | Returns the diagram. |
@using Syncfusion.Blazor.Diagrams
<SfDiagram Width="1000px" Height="600px">
<DiagramEvents DataLoaded="DataLoaded"></DiagramEvents>
</SfDiagram>
@code
{
public void DataLoaded(IDataLoadedEventArgs args)
{
//Action to be performed.
}
}
OnDoubleClick
Triggers when a node, connector, or diagram is clicked.
Argument Name | Description |
---|---|
Count | Returns the number of times clicked. |
Position | Returns the object position that is actually clicked. |
Element | Returns the object that is clicked or id of the diagram. |
@using Syncfusion.Blazor.Diagrams
<SfDiagram Width="1000px" Height="600px">
<DiagramEvents OnDoubleClick="OnDoubleClick"></DiagramEvents>
</SfDiagram>
@code
{
public void OnDoubleClick(IBlazorDoubleClickEventArgs args)
{
//Action to be performed.
}
}
DragEnter
Triggers when a symbol is dragged into a diagram from the symbol palette.
Argument Name | Description |
---|---|
Cancel | Returns whether to add or remove the symbol from the diagram. |
DiagramId | Returns the id of the diagram. |
Element | Returns the node or connector that is dragged into a diagram. |
Source | Returns the node or connector that is to be dragged into a diagram. |
@using Syncfusion.Blazor.Diagrams
<SfDiagram Width="1000px" Height="600px">
<DiagramEvents DragEnter="DragEnter"></DiagramEvents>
</SfDiagram>
@code
{
public void DragEnter(IBlazorDragEnterEventArgs args)
{
//Action to be performed.
}
}
DragLeave
Triggers when a symbol is dragged outside of the diagram.
Argument Name | Description |
---|---|
DiagramId | Returns the id of the diagram. |
Element | Returns the node or connector that is dragged outside of the diagram. |
@using Syncfusion.Blazor.Diagrams
<SfDiagram Width="1000px" Height="600px">
<DiagramEvents DragLeave="DragLeave"></DiagramEvents>
</SfDiagram>
@code
{
public void DragLeave(IBlazorDragLeaveEventArgs args)
{
//Action to be performed.
}
}
OnDrop
Triggers when a symbol is dragged and dropped from the symbol palette to the drawing area.
Argument Name | Description |
---|---|
Cancel | Returns node or connector that is being dropped. |
Element | Returns the node or connector that is dragged into a diagram. |
Position | Returns the position of the object. |
Source | Returns the object from where the element is dragged. |
Target | Returns the object over which the object will be dropped. |
@using Syncfusion.Blazor.Diagrams
<SfDiagram Width="1000px" Height="600px">
<DiagramEvents OnDrop="OnDrop"></DiagramEvents>
</SfDiagram>
@code
{
public void OnDrop(IBlazorDropEventArgs args)
{
//Action to be performed.
}
}
HistoryChanged
Triggers when a change is reverted or restored(undo/redo).
Argument Name | Description |
---|---|
Cause | Returns the cause of the event. |
Change | Returns an array of objects, where each object represents the changes made in the last undo/redo. |
Source | Returns a collection of objects that are changed in the last undo/redo. |
Action | Returns the event action. |
@using Syncfusion.Blazor.Diagrams
<SfDiagram Width="1000px" Height="600px">
<DiagramEvents HistoryChanged="HistoryChanged"></DiagramEvents>
</SfDiagram>
@code
{
public void HistoryChanged(IBlazorHistoryChangeArgs args)
{
//Action to be performed.
}
}
MouseEnter
Triggered when the mouse enters a node/connector.
Argument Name | Description |
---|---|
ActualObject | Returns when the mouse hovers to the target node or connector. |
Element | Returns a parent node of the target node or connector. |
Target | Returns the target object over which the selected object is dragged. |
@using Syncfusion.Blazor.Diagrams
<SfDiagram Width="1000px" Height="600px">
<DiagramEvents MouseEnter="MouseEnter"></DiagramEvents>
</SfDiagram>
@code
{
public void MouseEnter(IBlazorMouseEventArgs args)
{
//Action to be performed.
}
}
MouseLeave
Triggered when the mouse leaves node/connector.
Argument Name | Description |
---|---|
ActualObject | Returns when the mouse hovers to the target node or connector. |
Element | Returns a parent node of the target node or connector. |
Target | Returns the target object over which the selected object is dragged. |
@using Syncfusion.Blazor.Diagrams
<SfDiagram Width="1000px" Height="600px">
<DiagramEvents MouseLeave="MouseLeave"></DiagramEvents>
</SfDiagram>
@code
{
public void MouseLeave(IBlazorMouseEventArgs args)
{
//Action to be performed.
}
}
OnPositionChange
Triggers while dragging the elements in a diagram.
Argument Name | Description |
---|---|
Source | Returns the node or connector that is being dragged. |
State | Returns the state of drag event (Starting, dragging, and completed). |
NewValue | Returns the current node or connector that is being dragged. |
OldValue | Returns the previous node or connector that is dragged. |
Target | Returns the target node or connector that is dragged. |
TargetPosition | Returns the offset of the selected items. |
AllowDrop | Returns whether the object that can be dropped over the element. |
Cancel | Returns whether to cancel the change or not. |
@using Syncfusion.Blazor.Diagrams
<SfDiagram Width="1000px" Height="600px">
<DiagramEvents OnPositionChange="OnPositionChange"></DiagramEvents>
</SfDiagram>
@code
{
public void OnPositionChange(IBlazorDraggingEventArgs args)
{
//Action to be performed.
}
}
PropertyChanged
Triggers once the node or connector property changed.
Argument Name | Description |
---|---|
Element | Returns the selected element. |
Cause | Returns the action is nudged or not. |
NewValue | Returns the new value of the property that is being changed. |
OldValue | Returns the old value of the node property that is being changed. |
@using Syncfusion.Blazor.Diagrams
<SfDiagram Width="1000px" Height="600px">
<DiagramEvents PropertyChanged="PropertyChanged"></DiagramEvents>
</SfDiagram>
@code
{
public void PropertyChanged(IBlazorPropertyChangeEventArgs args)
{
//Action to be performed.
}
}
OnRotateChange
Triggers when the diagram elements are rotated.
Argument Name | Description |
---|---|
Source | Returns the node that is selected for rotation. |
State | Returns the state of an event. |
NewValue | Returns the current rotation angle. |
OldValue | Returns the previous rotation angle. |
Cancel | Returns whether to cancel the change or not. |
@using Syncfusion.Blazor.Diagrams
<SfDiagram Width="1000px" Height="600px">
<DiagramEvents OnRotateChange="OnRotateChange"></DiagramEvents>
</SfDiagram>
@code
{
public void OnRotateChange(IRotationEventArgs args)
{
//Action to be performed.
}
}
SelectionChanged
Triggers when the selection is changed in the diagram.
Argument Name | Description |
---|---|
Cause | Returns the actual cause of the event. |
State | Returns the state of an event. |
NewValue | Returns the collection of nodes and connectors that have to be added to the selection list. |
OldValue | Returns the collection of nodes and connectors that have to be removed from the selection list. |
Type | Returns whether the item is added or removed from the selection list. |
Cancel | Returns whether or not to cancel the selection change event or not. |
@using Syncfusion.Blazor.Diagrams
<SfDiagram Width="1000px" Height="600px">
<DiagramEvents SelectionChanged="SelectionChanged"></DiagramEvents>
</SfDiagram>
@code
{
public void SelectionChanged(IBlazorSelectionChangeEventArgs args)
{
//Action to be performed.
}
}
OnSizeChange
Triggers when a node is resized.
Argument Name | Description |
---|---|
Source | Returns the node that is selected for resizing. |
State | Returns the state of an event. |
NewValue | Returns the new width, height, offsetX, and offsetY values of the element that is being resized. |
OldValue | Returns the previous width, height, offsetX, and offsetY values of the element that is being resized. |
Cancel | Returns whether or not to cancel the size change event or not. |
@using Syncfusion.Blazor.Diagrams
<SfDiagram Width="1000px" Height="600px">
<DiagramEvents OnSizeChange="OnSizeChange"></DiagramEvents>
</SfDiagram>
@code
{
public void OnSizeChange(ISizeChangeEventArgs args)
{
//Action to be performed.
}
}
TextEdited
Triggers when editor got focus at the time of node’s label or text node editing.
Argument Name | Description |
---|---|
Element | Returns a node or connector in which annotation is being edited. |
Annotation | Returns an annotation which that is being edited. |
NewValue | Returns the new text value of the element that is being changed. |
OldValue | Returns the old text value of the element. |
Cancel | Returns whether or not to cancel the event or not. |
@using Syncfusion.Blazor.Diagrams
<SfDiagram Width="1000px" Height="600px">
<DiagramEvents TextEdited="TextEdited"></DiagramEvents>
</SfDiagram>
@code
{
public void TextEdited(IBlazorTextEditEventArgs args)
{
//Action to be performed.
}
}
Native events
The Diagram control provides event support, which triggers while interacting with the diagram. Also, Syncfusion provides native event support in blazor for the following events
Event Name | Event Type |
---|---|
onfocus | FocusEventArgs |
onclick | MouseEventArgs |
onmousemove | MouseEventArgs |
onmouseover | MouseEventArgs |
onmouseout | MouseEventArgs |
onmousedown | MouseEventArgs |
onmouseup | MouseEventArgs |
ondblclick | MouseEventArgs |
onkeydown | KeyboardEventArgs |
onkeyup | KeyboardEventArgs |
ondrop | DragEventArgs |
The native events can be defined as mentioned below. For example, the onmousedown event in diagram.
@using Syncfusion.Blazor.Diagrams
<SfDiagram @onmousedown="@OnMouseDown" Height="600px"/>
@code
{
public void OnMouseDown(MouseEventArgs args)
{
//Action to be performed
}
}