Diagram Events in Blazor Diagram Component

7 Aug 202324 minutes to read

Created Event

The Created event is triggered when the Diagram component is rendered. You can perform any action in the created event such as selecting any object in the diagram.

@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel

<SfDiagramComponent @ref="@Diagram"
                    Width="100%"
                    Height="700px"
                    Nodes="nodes"
                    Created="OnCreated">
</SfDiagramComponent>

@code{
    SfDiagramComponent Diagram;
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            OffsetX = 250,
            OffsetY = 250,
            Width = 100,
            Height = 100
        };
        nodes.Add(node);
    }
    private void OnCreated(object args)
    {

        Diagram.Select(new ObservableCollection<IDiagramObject>() { Diagram.Nodes[0] });
    }
}

You can download a complete working sample from GitHub

Click Event

The Click event is triggered when a node, connector, or a diagram is clicked. To explore about arguments, refer to the ClickEventArgs

@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel

<SfDiagramComponent @ref="@Diagram"
                    Width="100%"
                    Height="700px"
                    Nodes="nodes"
                    Click="OnClick">
</SfDiagramComponent>

@code{
    SfDiagramComponent Diagram;
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            OffsetX = 250,
            OffsetY = 250,
            Width = 100,
            Height = 100
        };
        nodes.Add(node);
    }
    private void OnClick(ClickEventArgs args)
    {

    }
}

You can download a complete working sample from GitHub

PropertyChanged Event

The Property Changed event is triggered when the property changed at run time. To explore about arguments, refer toPropertyChangedEventArgs

@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel

<SfDiagramComponent @ref="@Diagram"
                    Width="100%"
                    Height="700px"
                    Nodes="nodes"
                    PropertyChanged="OnPropertyChanged"
</SfDiagramComponent>

@code{
    SfDiagramComponent Diagram;
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            OffsetX = 250,
            OffsetY = 250,
            Width = 100,
            Height = 100
        };
        nodes.Add(node);
    }
     // Notify the property changed event while the change property is at run time.
    private void OnPropertyChanged(PropertyChangedEventArgs args)
    {
        //Action to be performed.
    }
}

You can download a complete working sample from GitHub

CollectionChange Event

  • When the node or connector is added or removed from the diagram, the following events are used for customization. It triggers when the node or connector collection is changed.
Event Name Arguments Description
CollectionChanging CollectionChangingEventArgs Triggers before the node or connector is added or removed from the diagram.
CollectionChanged CollectionChangedEventArgs Triggers after the node or connector is added or removed from the diagram 
@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel

<SfDiagramComponent @ref="@Diagram"
                    Width="100%"
                    Height="700px"
                    Nodes="nodes"
                    CollectionChanged="OnCollectionChanged">
</SfDiagramComponent>

@code{
    SfDiagramComponent Diagram;
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            OffsetX = 250,
            OffsetY = 250,
            Width = 100,
            Height = 100
        };
        nodes.Add(node);
    }
     //  Notify the Collection Changed event while changing the collection of the node or connector at run time.
    private void OnCollectionChanged(CollectionChangedEventArgs args)
    {
        //Action to be performed.
    }
}

You can download a complete working sample from GitHub

MouseEnter Event

The MouseEnter event is triggered when the mouse enters a node or connector. To explore about arguments, refer to the DiagramElementMouseEventArgs

@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel

<SfDiagramComponent @ref="@Diagram"
                    Width="100%"
                    Height="700px"
                    Nodes="nodes"
                    MouseEnter="OnMouseEnter">
</SfDiagramComponent>

@code{
    SfDiagramComponent Diagram;
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            OffsetX = 250,
            OffsetY = 250,
            Width = 100,
            Height = 100
        };
        nodes.Add(node);
    }
    private void OnMouseEnter(DiagramElementMouseEventArgs args)
    {

    }
}

You can download a complete working sample from GitHub

MouseLeave Event

The MouseLeave event is triggered when the mouse leaves a node or connector. To explore about arguments, refer to the DiagramElementMouseEventArgs

@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel

<SfDiagramComponent @ref="@Diagram"
                    Width="100%"
                    Height="700px"
                    Nodes="nodes"
                    MouseLeave="OnMouseLeave">
</SfDiagramComponent>

@code{
    SfDiagramComponent Diagram;
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            OffsetX = 250,
            OffsetY = 250,
            Width = 100,
            Height = 100
        };
        nodes.Add(node);
    }
    private void OnMouseLeave(DiagramElementMouseEventArgs args)
    {

    }
}

You can download a complete working sample from GitHub

MouseHover Event

The MouseHover event is triggered when the mouse pointer rests on the node or connector. To explore about arguments, refer to theDiagramElementMouseEventArgs

@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel

<SfDiagramComponent @ref="@Diagram"
                    Width="100%"
                    Height="700px"
                    Nodes="nodes"
                    MouseHover="OnMouseHover">
</SfDiagramComponent>

@code{
    SfDiagramComponent Diagram;
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            OffsetX = 250,
            OffsetY = 250,
            Width = 100,
            Height = 100
        };
        nodes.Add(node);
    }
    private void OnMouseHover(DiagramElementMouseEventArgs args)
    {

    }
}

You can download a complete working sample from GitHub

KeyDown Event

The KeyDown event is triggered when the user presses a key. To explore about arguments, refer to the KeyEventArgs

@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel

<SfDiagramComponent @ref="@Diagram"
                    Width="100%"
                    Height="700px"
                    Nodes="nodes"
                     KeyDown="@OnKeyDown">
</SfDiagramComponent>

@code{
    SfDiagramComponent Diagram;
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            OffsetX = 250,
            OffsetY = 250,
            Width = 100,
            Height = 100
        };
        nodes.Add(node);
    }
    private void OnKeyDown(KeyEventArgs args)
    {

    }
}

You can download a complete working sample from GitHub

KeyUp Event

The KeyUpevent is triggered when a user releases a key. To explore about arguments, refer to the KeyEventArgs

@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel

<SfDiagramComponent @ref="@Diagram"
                    Width="100%"
                    Height="700px"
                    Nodes="nodes"
                     KeyUp="@OnKeyUp">
</SfDiagramComponent>

@code{
    SfDiagramComponent Diagram;
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            OffsetX = 250,
            OffsetY = 250,
            Width = 100,
            Height = 100
        };
        nodes.Add(node);
    }
    private void OnKeyUp(KeyEventArgs args)
    {

    }
}

You can download a complete working sample from GitHub

DragStart Event

  • The DragStart event is triggered when a symbol is dragged into the diagram from the symbol palette. To explore about arguments, refer to the DragStartEventArgs 
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Diagram.SymbolPalette
@using System.Collections.ObjectModel

<SfDiagramComponent @ref="@Diagram"
                    Width="100%"
                    Height="700px"
                    Nodes="nodes"
                    DragStart="DragStart">
</SfDiagramComponent>
<SfSymbolPaletteComponent Height="600px" Palettes="@Palettes"  SymbolHeight="40" GetSymbolInfo="GetSymbolInfo" SymbolWidth="40" >
</SfSymbolPaletteComponent >
@code{
    SfDiagramComponent Diagram;
    DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
    DiagramObjectCollection<NodeBase> TNodes = new DiagramObjectCollection<NodeBase>();
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    private SymbolInfo GetSymbolInfo(IDiagramObject symbol)
    {
            SymbolInfo SymbolInfo = new SymbolInfo();
            SymbolInfo.Fit = true;
            return SymbolInfo;
          }
    protected override void OnInitialized()
    {
             TNodes = new DiagramObjectCollection<NodeBase>();
             Node TNode2 = new Node()
             { 
                 ID = "node1", 
                 Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision } 
             };
            TNodes.Add(TNode2);
            Palettes = new DiagramObjectCollection<Palette>()
             {
                new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" },
             };
    }
     //Notify the drag start event.
    private void DragStart(DragStartEventArgs args)
    {
        //Action to be performed.
    }
}

You can download a complete working sample from GitHub

Dragging Event

  • The Dragging event is triggered when an element drags over another diagram element. To explore about arguments, refer to the DraggingEventArgs 
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Diagram.SymbolPalette
@using System.Collections.ObjectModel

<SfDiagramComponent @ref="@Diagram"
                    Width="100%"
                    Height="700px"
                    Nodes="nodes"
                    Dragging="Dragging">
</SfDiagramComponent>
<SfSymbolPaletteComponent Height="600px" Palettes="@Palettes"  SymbolHeight="40" GetSymbolInfo="GetSymbolInfo" SymbolWidth="40" >
</SfSymbolPaletteComponent >
@code{
    SfDiagramComponent Diagram;
    DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
    DiagramObjectCollection<NodeBase> TNodes = new DiagramObjectCollection<NodeBase>();
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    private SymbolInfo GetSymbolInfo(IDiagramObject symbol)
    {
            SymbolInfo SymbolInfo = new SymbolInfo();
            SymbolInfo.Fit = true;
            return SymbolInfo;
          }
    protected override void OnInitialized()
    {
             TNodes = new DiagramObjectCollection<NodeBase>();
             Node TNode2 = new Node()
             { 
                 ID = "node1", 
                 Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision } 
             };
            TNodes.Add(TNode2);
            Palettes = new DiagramObjectCollection<Palette>()
             {
                new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" },
             };
    }
     // Notify the dragging event.
    private void Dragging(DraggingEventArgs args)
    {
        //Action to be performed.
    }
}

You can download a complete working sample from GitHub

DragLeave Event

  • The DragLeave event is triggered when an element drags over another diagram element. To explore about arguments, refer to theDragLeaveEventArgs 
@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel

<SfDiagramComponent @ref="@Diagram"
                    Width="100%"
                    Height="700px"
                    Nodes="nodes"
                    DragLeave="OnDragLeave">
</SfDiagramComponent>
<SfSymbolPaletteComponent Height="600px" Palettes="@Palettes" SymbolDragPreviewSize="@SymbolPreview" SymbolHeight="40" GetSymbolInfo="GetSymbolInfo" SymbolWidth="40" >
</SfSymbolPaletteComponent >
@code{
    SfDiagramComponent Diagram;
    DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
    DiagramObjectCollection<NodeBase> TNodes = new DiagramObjectCollection<NodeBase>();
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    private SymbolInfo GetSymbolInfo(IDiagramObject symbol)
    {
            SymbolInfo SymbolInfo = new SymbolInfo();
            SymbolInfo.Fit = true;
            return SymbolInfo;
          }
    protected override void OnInitialized()
    {
             SymbolPreview = new DiagramSize();
             SymbolPreview.Width = 80;
             SymbolPreview.Height = 80;
             symbolSizeWidth = 50;
             symbolSizeHeight = 50;
             TNodes = new DiagramObjectCollection<NodeBase>();
             Node TNode2 = new Node()
             { 
                 ID = "node1", 
                 Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = FlowShapeType.Decision } 
             };
            TNodes.Add(TNode2);
            Palettes = new DiagramObjectCollection<Palette>()
             {
                new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" },
             };
    }
     // Notify the DragLeave event.
    private void DragLeave(DragLeaveEventArgs args)
    {
        //Action to be performed.
    }
}

You can download a complete working sample from GitHub

DragDrop Event

  • The DragDrop event is triggered when a symbol is dragged and dropped from the symbol palette to the drawing area. To explore about arguments, refer to the DropEventArgs 
@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel

<SfDiagramComponent @ref="@Diagram"
                    Width="100%"
                    Height="700px"
                    Nodes="nodes"
                    DragDrop="DragDrop">
</SfDiagramComponent>
<SfSymbolPaletteComponent Height="600px" Palettes="@Palettes" SymbolDragPreviewSize="@SymbolPreview" SymbolHeight="40" GetSymbolInfo="GetSymbolInfo" SymbolWidth="40" >
</SfSymbolPaletteComponent >
@code{
    SfDiagramComponent Diagram;
    DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
    DiagramObjectCollection<NodeBase> TNodes = new DiagramObjectCollection<NodeBase>();
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    private SymbolInfo GetSymbolInfo(IDiagramObject symbol)
    {
            SymbolInfo SymbolInfo = new SymbolInfo();
            SymbolInfo.Fit = true;
            return SymbolInfo;
          }
    protected override void OnInitialized()
    {
             SymbolPreview = new DiagramSize();
             SymbolPreview.Width = 80;
             SymbolPreview.Height = 80;
             symbolSizeWidth = 50;
             symbolSizeHeight = 50;
             TNodes = new DiagramObjectCollection<NodeBase>();
             Node TNode2 = new Node()
             { 
                 ID = "node1", 
                 Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = FlowShapeType.Decision } 
             };
            TNodes.Add(TNode2);
            Palettes = new DiagramObjectCollection<Palette>()
             {
                new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" },
             };
    }
     // Notify the DragDrop event.
    private void DragDrop(DropEventArgs args)
    {
        //Action to be performed.
    }
}

You can download a complete working sample from GitHub

OnAutoScrollChange Event

The OnAutoScrollChange event is triggered with AutoScrollChangeEventArgs argument when changes are detected to the scroll position, extent, or viewport size as a result of auto-scrolling for diagram elements.

The AutoScrollChangeEventArgs include the following options:

  • Cancel - Auto-scrolling can be stopped by setting to true to this property.
  • Item - Represents a diagram element that is currently being auto-scrolled.
  • Delay - The amount of time to wait from applying the auto scroll to the diagram element before beginning to perform the auto scroll can be controlled by setting TimeSpan value to this property.
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Height="400px" Width="400px" Nodes="@nodes" Connectors="@connectors" OnAutoScrollChange="AutoScrollChange">
    @* Sets the ScrollSettings for the diagram *@
    <ScrollSettings EnableAutoScroll=true AutoScrollPadding="@autoScrollBorder" @bind-ScrollLimit="@ScrollLimit">
    </ScrollSettings>
</SfDiagramComponent>
@code
{
    ScrollLimitMode ScrollLimit { get; set; } = ScrollLimitMode.Infinity;
    DiagramObjectCollection<Node> nodes;
    //Defines diagram's connector collection.
    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
    DiagramMargin autoScrollBorder = new DiagramMargin() { Left = 30, Right = 30, Top = 30, Bottom = 30 };
    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        // A node is created and stored in the nodes collection.
        Node node = new Node()
            {
                ID = "node1",
                // Position of the node.
                OffsetX = 250,
                OffsetY = 250,
                // Size of the node.
                Width = 100,
                Height = 100,
                Style = new ShapeStyle()
                {
                    Fill = "#6495ED",
                    StrokeColor = "white"
                }
            };
        // Add node.
        nodes.Add(node);
        Connector Connector = new Connector()
            {
                ID = "connector1",
                // Set the source and target point of the connector.
                SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
                TargetPoint = new DiagramPoint() { X = 100, Y = 200 },
                // Type of the connector segments.
                Type = ConnectorSegmentType.Straight,
                Style = new ShapeStyle()
                {
                    StrokeColor = "#6495ED",
                    StrokeWidth = 1
                },
            };
        connectors.Add(Connector);
    }
    private void AutoScrollChange(AutoScrollChangeEventArgs args)
    {
        args.Cancel = false;
        args.Delay = new TimeSpan(0, 0, 0, 1, 0);
    }
}

Speed Limit control in autoScroll support for node

You can download a complete working sample from GitHub