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 20226 minutes to read

Text edit

The TextEdit event will notify the annotation content changes after editing. The IBlazorTextEditEventArgs interface is used to get event arguments.

The following code example shows how to register and get the notification from the TextEdit event.

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

<SfDiagram Height="600px" Nodes="@NodeCollection">
    <DiagramEvents TextEdited="@TextEdited"></DiagramEvents>
</SfDiagram>

@code
{
    //Defines diagram's nodes collection
    public ObservableCollection<DiagramNode> NodeCollection { get; set; }

    //Triggered this event when complete the editing for Annotation and update the old text and new text values.
    private void TextEdited(IBlazorTextEditEventArgs args)
    {
        Console.WriteLine("Oldvalue", args.OldValue);
        Console.WriteLine("NewValue", args.NewValue);
    }
    
    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();
        DiagramNode node = new DiagramNode()
        {
            Width = 100,
            Height = 100,
            OffsetX = 100,
            OffsetY = 100,
            Style = new NodeShapeStyle()
            {
                Fill = "#6BA5D7",
                StrokeColor = "white"
            },
        };
        node.Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
            new DiagramNodeAnnotation() {Content = "Annotation" }
        };
        NodeCollection.Add(node);
    }
}

Double click

The DoubleClick event will notify the annotation start editing. The IDoubleClickEventArgs interface is used to get the position actually clicked and clicked object.

The following code example shows how to register and get the notification from the OnDoubleClick event.

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

<SfDiagram Height="600px" Nodes="@NodeCollection">
    <DiagramEvents OnDoubleClick="@OnDoubleClick" />
</SfDiagram>

@code
{
    //Defines diagram's nodes collection
    public ObservableCollection<DiagramNode> NodeCollection
    { get; set; }

    //Triggered this event when double click on the Annotation and update the position and source for clicked item.
    private void OnDoubleClick(IBlazorDoubleClickEventArgs args)
    {
        Console.WriteLine("Position", args.Position);
        Console.WriteLine("Source", args.Source);
    }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();
        DiagramNode node = new DiagramNode()
        {
            Width = 100,
            Height = 100,
            OffsetX = 100,
            OffsetY = 100,
            Style = new NodeShapeStyle()
            {
                Fill = "#6BA5D7",
                StrokeColor = "white"
            },
        };
        node.Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
            new DiagramNodeAnnotation() {Content = "Annotation" }
        };
        NodeCollection.Add(node);
    }
}

Key down

The keydown event occurs when a keyboard key is pressed down and updated the respective keyboard key pressed.

Key up

The keyup event occurs when a keyboard key is released and updated the respective keyboard key pressed.

The following code example shows how to register and get the notification from the onkeydown and onkeyup events.

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

<SfDiagram Height="600px" Nodes="@NodeCollection">
    <DiagramEvents OnKeyDown="@OnKeyDown" OnKeyUp="@OnKeyUp"></DiagramEvents>
</SfDiagram>

@code
{
    //Defines diagram's nodes collection
    public ObservableCollection<DiagramNode> NodeCollection
    { get; set; }

    //Occurs when  click the annotation and enter the character in key down state
    private void OnKeyDown(IKeyEventArgs args)
    {

    }

    //Occurs when click the annotation and enter the character in key release state
    private void OnKeyUp(IKeyEventArgs args)
    {

    }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();
        DiagramNode node = new DiagramNode()
        {
            Width = 100,
            Height = 100,
            OffsetX = 100,
            OffsetY = 100,
            Style = new NodeShapeStyle()
            {
                Fill = "#6BA5D7",
                StrokeColor = "white"
            },
        };
        node.Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
            new DiagramNodeAnnotation() {Content = "Annotation" }
        };
        NodeCollection.Add(node);
    }
}

See also