How to Select a Group Child Element Without Selecting the Parent Group Node in Syncfusion Blazor Diagram Component?

This guide provides a step-by-step approach to selecting a group child element in the Syncfusion® SfDiagramComponent without automatically selecting the parent group node. This is useful for scenarios where you want to manipulate individual child elements independently of the group they belong to.

Prerequisites:
Before proceeding, ensure you have a Blazor Server application set up. If you need assistance, you can follow the instructions here: Create Blazor Server application

Implementation Steps:

Step 1: Define the Diagram Component
Configure the SfDiagramComponent in your Blazor page to include necessary event handlers and properties for node and connector configurations.

@page "/"
@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel

<SfDiagramComponent 
   @ref="@Diagram" 
   Width="1200px" 
   Height="600px" 
   Nodes="@nodes" 
   KeyUp="@Keyup" 
   KeyDown="@Keydown" 
   Connectors="@connectors"
   Click="@ClickHandler">
</SfDiagramComponent>

@code {
   // Reference to the Diagram component
   public SfDiagramComponent Diagram;

   // Collections for nodes and connectors
   DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
   DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();

   // Initialize nodes and groups
   protected override void OnInitialized()
   {
       nodes = new DiagramObjectCollection<Node>();
       Node DiagramNode = new Node()
           {
               ID = "node1",
               OffsetX = 700,
               OffsetY = 500,
               Width = 100,
               Height = 100,
               Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" },
               Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation { Content = "NodeB" } }
           };
       nodes.Add(DiagramNode);
       Node DiagramNode1 = new Node()
           {
               ID = "node2",
               OffsetX = 700,
               OffsetY = 700,
               Width = 100,
               Height = 100,
               Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" },
               Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation { Content = "NodeB" } }
           };
       nodes.Add(DiagramNode1);
       Node DiagramNode2 = new Node()
           {
               ID = "node3",
               OffsetX = 900,
               OffsetY = 700,
               Width = 100,
               Height = 100,
               Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" },
               Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation { Content = "NodeB" } }
           };
       nodes.Add(DiagramNode2);
       NodeGroup group1 = new NodeGroup()
           {
               ID = "group1",
               Children = new string[] { "node1", "node2", "node3" },
               Padding = new DiagramThickness() { Left = 20, Right = 20, Top = 20, Bottom = 20 },
               OffsetX = 300,
               OffsetY = 300,
               Style = new ShapeStyle() { Fill = "white", StrokeColor = "black" },
               Annotations = new DiagramObjectCollection<ShapeAnnotation>()
                       {
                           new ShapeAnnotation()
                           {
                           Content = "Group1"
                           }
                       },
           };
       nodes.Add(group1);
   }
}

Step 2: Implement the ClickHandler Function
Implement a custom click event handler to ensure you can select individual child nodes without automatically triggering the selection of the parent group node.

• Click Event: This handler differentiates click events and prevents selecting the group node by unselecting it if clicked. It allows individual child nodes to be selected by maintaining a collection of selected nodes.

private void ClickHandler(ClickEventArgs args)
   {
       var clickedObject = args.ActualObject as IDiagramObject;

       // If the clicked object is a NodeGroup, unselect the group node
       if (clickedObject is NodeGroup)
       {
           Diagram.UnSelect(clickedObject);
       }
       // Handle Ctrl + Click for multi-selection
       else if (isCtrlKeyPressed && clickedObject != null)
       {
           // Add the clicked object to the selected collection if it's not already selected
           if (!selectedChildNodes.Contains(clickedObject))
           {
               selectedChildNodes.Add(clickedObject);
           }
           Diagram.Select(selectedChildNodes, false); // False to avoid clearing other selections
       }
       // Clear selection if clicked outside any object
       else if (clickedObject == null)
       {
           Diagram.ClearSelection();
           selectedChildNodes.Clear();
       }
       // If no Ctrl key is pressed, select the clicked object
       else
       {
           Diagram.ClearSelection(); // Clear previous selections
           Diagram.Select(new ObservableCollection<IDiagramObject> { clickedObject });
       }
   }

Step 3: Implement Keyboard Event Handlers
Implement KeyDown and KeyUp to manage multi-selection functionality using the Ctrl key.

• Key Down Event: Detects when the Control key is pressed, enabling multi-selection mode.

private bool isCtrlKeyPressed = false;

   // Handle Key Down event for detecting Ctrl key
   private void Keydown(KeyEventArgs args)
   {
       if (args.KeyModifiers == ModifierKeys.Control)
       {
           isCtrlKeyPressed = true;

           // Check if any node is selected and add it to the collection
           if (Diagram.SelectionSettings.Nodes?.Count > 0)
           {
               var selectedNode = Diagram.SelectionSettings.Nodes[0] as IDiagramObject;

               if (selectedNode != null && !selectedChildNodes.Contains(selectedNode))
               {
                   selectedChildNodes.Add(selectedNode);
               }
           }
       }
   } 

• Key Up Event: Detects when the Control key is released, disabling multi-selection mode and clearing the selected nodes collection.

   // Handle Key Up event for detecting when Ctrl is released
   private void Keyup(KeyEventArgs args)
   {
       if (args.Key == "Control")
       {
           isCtrlKeyPressed = false;
           selectedChildNodes.Clear(); // Clear selected child nodes when Ctrl is released
       }
   }

Explanation:

• The Click Event Handler is modified to allow selection of multiple child nodes if the Ctrl key is pressed.
• The Keyboard Event Handlers are essential for managing the state of the multi-selection feature, ensuring nodes can be selected independently of the parent group.

Output:

You can download the complete working sample from here.

Conclusion:

We hope you enjoyed learning how to select a group child element without selecting the parent group node in Syncfusion® Blazor Diagram Component

You can refer to our Blazor Diagram feature tour page to learn about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Diagram example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to evaluate our Blazor Diagram and Blazor components.

If you have any questions 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!