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

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

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