Events in Blazor Diagram Component

12 Nov 20242 minutes to read

Text Change event

  • While editing a node’s or connector’s annotation, the following event can be used to do the customization.
  • When a node’s or connector’s annotation is changed in the diagram, this event is getting triggered.
Event Name Arguments Description
TextChanged TextChangeEventArgs Triggers when the node’s/connector’s label is changed in the diagram.
TextChanging TextChangeEventArgs An event that is raised when the node and connector’s label is changing in the diagram.

The following code example shows how to register and get notifications from the TextChanged and TextChanging events.

@using Syncfusion.Blazor.Diagram

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

@code
{
    // Defines diagram's nodes collection.
    DiagramObjectCollection<Node> nodes;
    // Triggered when the node and connector's labels change in the diagram.
   private void OnLabelTextChanging(TextChangeEventArgs args)
   {
      args.Cancel = true;
   }
    // 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);
    }
}

You can download a complete working sample from GitHub

See also