How to Select Only the GroupNode Without Selecting Child Nodes in Syncfusion Blazor Diagram

In Syncfusion® Blazor Diagram, you can interact with GroupNodes in a way that makes only the GroupNode selectable, without selecting the individual child nodes. This setup is useful when you want to manage the entire group as a single unit.

Prerequisites:
Create a Blazor Server application by following this guide

1. How Do I Interact with GroupNodes?
To make only the GroupNode selectable (without selecting its child nodes), disable the Select option on the child nodes.

<SfDiagramComponent @ref="@diagram" Height="500px" Nodes="@nodes" />

@code {
   SfDiagramComponent diagram;
   DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();

   protected override void OnInitialized() {
       Node pathNode = new Node() {
           ID = "pathNode",
           Height = 100,
           Width = 100,
           OffsetX = 100,
           OffsetY = 200,
           Constraints = NodeConstraints.Default & ~NodeConstraints.Select,
           Shape = new PathShape() {
               Type = NodeShapes.Path,
               Data = "M 355.31 12.07 ... z"
           },
           Style = new ShapeStyle() { Fill = "Orange" }
       };

       Node node2 = new Node() {
           ID = "node2",
           OffsetX = 300,
           OffsetY = 100,
           Height = 100,
           Width = 100,
           Shape = new PathShape() {
               Type = NodeShapes.Path,
               Data = "M540.3643,137.9336 ... z"
           },
           Constraints = NodeConstraints.Default & ~NodeConstraints.Select,
           Style = new ShapeStyle() { Fill = "#6495ED" }
       };

       NodeGroup groupnode = new NodeGroup() {
           Children = new string[] { "pathNode", "node2" }
       };

       nodes.Add(node2);
       nodes.Add(pathNode);
       nodes.Add(groupnode);
   }
} 

Result: You can only select the GroupNode, not the individual nodes within it.

You can download the complete working sample from here.

Conclusion:

We hope you enjoyed learning how to create a GroupNode where only the group itself is selectable.
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 other 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, support portal, or feedback portal. We are always happy to assist you!

Related Resources:
Grouping Nodes
Node Constraints