How to identify the Clicked diagram elments in Syncfusion Blazor Diagram?

In Syncfusion® Blazor Diagram component, detecting user clicks on elements like nodes and connectors is essential for interaction and event handling. This guide demonstrates how to set up the Clickevent to identify which element was clicked and how to handle different types of clicks.

Prerequisites

Before proceeding, ensure that:

• You have the Syncfusion® Blazor Diagram package installed in your Blazor project.
• Your project is set up to use Syncfusion® components.

Setting Up the OnClick Event for Diagram Elements

Step 1: Create a Blazor Server Application
Follow this guide to Create Blazor Server application

Step 2: Add the Syncfusion® Blazor Diagram Component
Add the SfDiagramComponent to your Razor component and set up the Click event handler to capture clicks on diagram elements.

@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel
<SfDiagramComponent @ref="Diagram"
                   Width="100%"
                   Height="700px"
                   Nodes="nodes"
                   Connectors="connectors"
                   Click="OnClick">
</SfDiagramComponent>
@code {
   // Reference to the diagram
   SfDiagramComponent Diagram;
   IDiagramObject clickedObject;

   // Initialize the diagram's nodes collection
   DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();

   // Define the diagram's connector collection
   DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();

   protected override void OnInitialized()
   {
       // Create and add a node to the diagram
       Node node = new Node()
       {
           ID = "node1",
           OffsetX = 250,
           OffsetY = 250,
           Width = 100,
           Height = 100
       };
       nodes.Add(node);

       // Create and add a connector to the diagram
       Connector connector = new Connector()
       {
           ID = "connector1",
           SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
           TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
           Type = ConnectorSegmentType.Straight
       };
       connectors.Add(connector);
   }

   // Handle the click event
   private void OnClick(ClickEventArgs args)
   {
       clickedObject = args.ActualObject;
       if (clickedObject is Node node)
       {
           // Node clicked, process the node here
           Console.WriteLine($"Node clicked: {node.ID}");
       }
       else if (clickedObject is Connector connector)
       {
           // Connector clicked, process the connector here
           Console.WriteLine($"Connector clicked: {connector.ID}");
       }
       else
       {
           // Diagram background or other element clicked
           Console.WriteLine("Other element clicked");
       }
   }
} 

In this example:

• The OnClick method is triggered when an element within the diagram is clicked.
• By examining the ActualObject property of ClickEventArgs, you can determine whether the clicked item is a node, connector, or another element.

You can download the complete working sample from here.

Conclusion:
I hope you enjoyed learning how to how to Identify Clicked Elements in Syncfusion® Blazor Diagram.
You can refer to our Blazor Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Diagram example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac,, or feedback portal. We are always happy to assist you!