Events in Blazor Diagram Component

11 Mar 20222 minutes to read

Text Change event

  • While editing the node’s or connector’s annotation, TextChanged event can be used to do the customization.
  • When the node’s or connector’s annotation is changed in the diagram, this event is getting triggered.

The TextChangeEventArgs notifies when the annotation of an element undergoes editing.

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

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Height="600px" TextChanged="OnTextChanged" Nodes="@nodes" />

@code
{
    // Defines diagram's nodes collection.
    DiagramObjectCollection<Node> nodes;

    // Triggered this event when complete the editing for Annotation and update the old text and new text values.
    private void OnTextChanged(TextChangeEventArgs args)
    {
        Console.WriteLine("Oldvalue", args.OldValue);
        Console.WriteLine("NewValue", args.NewValue);
    }

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        Node node = new Node()
        {
            Width = 100,
            Height = 100,
            OffsetX = 100,
            OffsetY = 100,
            Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
        };
        node.Annotations = new DiagramObjectCollection<ShapeAnnotation>()
        {
            new ShapeAnnotation { Content = "Annotation" }
        };
        nodes.Add(node);
    }
}

See also