How to Provide IDs for Diagram Elements in Blazor Diagrams

When working with diagram elements such as nodes, connectors, and ports in a Blazor application using the Syncfusion® Diagram component, assigning IDs that follow specific naming conventions is crucial. This practice ensures proper functionality, easier maintenance, and compatibility across various features within the diagram. This knowledge base article outlines the best practices for providing IDs for these elements.

Naming Conventions for IDs

1. General Rules

• Start with a Letter: IDs must begin with an alphabetic character (a-z, A-Z).
• Avoid Special Characters: Do not use special characters such as underscores (_), hyphens (-), or spaces within the ID.
• Use Alphanumeric Characters: After the first character, you can use any combination of letters (uppercase and lowercase) and numbers (0-9).
• Length Consideration: While there is no strict length limit, keeping IDs concise yet descriptive is recommended for readability and maintainability.

2. Examples of Valid IDs

• Node1
• ConnectorA
• PortX1
• userHandle

3. Examples of Invalid IDs

• _Node1 (starts with an underscore)
• 1Connector (starts with a number)
• Node 1 (contains a space)
• Node@Connector (contains a special character)

Implementation Steps for Assigning IDs
When creating diagram elements, ensure you follow the naming conventions specified above. Below is an example demonstrating how to create a node with a valid ID in a Blazor Diagram component.

Example Code

@using Syncfusion.Blazor.Diagram

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

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

   protected override void OnInitialized()
   {
       nodes = new DiagramObjectCollection<Node>();
       
       // A node is created and stored in the nodes collection.
       Node node = new Node()
       {
           ID = "node1", // Valid ID
           // Position of the node
           OffsetX = 250,
           OffsetY = 250,
           // Size of the node
           Width = 100,
           Height = 100,
           Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }
       };
       
       // Add node to the collection
       nodes.Add(node);
   }
} 

you can download the complete working sample from here.

Conclusion:
We hope you enjoyed learning how to provide IDs for Diagram elements in Blazor Diagram.
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!