Why is it important to set the ParentID to Empty for at least one node when creating a layout in Syncfusion Blazor Diagram?

When creating a diagram layout in Syncfusion® Blazor Diagram, it is essential to set the ParentID field to empty for at least one node in the data source. This ensures that the layout has a starting point, as nodes with an empty ParentID are treated as root nodes. A root node acts as the base from which relationships and positions of other nodes are established in the layout. If multiple nodes have an empty ParentID, separate layouts are created for each node without a parent, resulting in multiple independent diagrams.

The ID and ParentID fields in the DataSourceSettings define the relationships between nodes and must be of type string. The ID uniquely identifies each node, while the ParentID specifies the parent-child connection.

Steps to Implement:

1. Create a Blazor Server Application
Begin by creating a Blazor Server application. Follow the instructions here to set up your project.

2. Set Up the Razor Page
Add a new Razor component to your project and import the necessary Syncfusion® Blazor namespaces:

@using Syncfusion.Blazor.Diagram 

3. Add the SfDiagram Component
Use the SfDiagramComponent to define the diagram, specifying the DataSourceSettings for node relationships.

<SfDiagramComponent Height="600px" Nodes="@nodes" Connectors="@connectors" NodeCreating="@OnNodeCreating" ConnectorCreating="@OnConnectorCreating">
 <DataSourceSettings ID="Id" ParentID="Manager" DataSource="DataSource"> </DataSourceSettings>
   <Layout Type="LayoutType.HierarchicalTree" HorizontalSpacing="@HorizontalSpacing" VerticalSpacing="@VerticalSpacing" >
   </Layout>
   <SnapSettings>
       <HorizontalGridLines LineColor="white" LineDashArray="2,2">
       </HorizontalGridLines>
       <VerticalGridLines LineColor="white" LineDashArray="2,2">
       </VerticalGridLines>
   </SnapSettings>
</SfDiagramComponent>

@code 
{
   
   DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
   DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
   int HorizontalSpacing = 40;
   int VerticalSpacing = 40;

   private void OnNodeCreating(IDiagramObject obj)
   {
       Node node = obj as Node;
       node.Height = 40;
       node.Width = 100;
       // Initializing the default node's shape style.
       node.Style = new ShapeStyle() { Fill = "darkcyan", StrokeWidth = 3, StrokeColor = "Black" };
   }

   private void OnConnectorCreating(IDiagramObject connector)
   {
       (connector as Connector).Type = ConnectorSegmentType.Orthogonal;
   }

   public class HierarchicalDetails
   {
       public string Id { get; set; }
       public string Role { get; set; }
       public string Manager { get; set; }
       public string ChartType { get; set; }
       public string Color { get; set; }
   }
   public List<HierarchicalDetails> DataSource = new List<HierarchicalDetails>()
   {
       new HierarchicalDetails()   { Id= "parent", Role= "Board", Color= "#71AF17" },
       new HierarchicalDetails()   { Id= "1", Role= "General Manager", Manager= "parent", ChartType= "right", Color= "#71AF17" },
       new HierarchicalDetails()   { Id= "2", Role= "Human Resource Manager", Manager= "1", ChartType= "right", Color= "#1859B7" },
       new HierarchicalDetails()   { Id= "3", Role= "Trainers", Manager= "2", Color= "#2E95D8" },
       new HierarchicalDetails()   { Id= "4", Role= "Recruiting Team", Manager= "2", Color= "#2E95D8" },
       new HierarchicalDetails()   { Id= "5", Role= "Finance Asst. Manager", Manager= "2", Color= "#2E95D8" },
       new HierarchicalDetails()   { Id= "6", Role= "Design Manager", Manager= "1",ChartType= "right", Color= "#1859B7" },
       new HierarchicalDetails()   { Id= "7", Role= "Design Supervisor", Manager= "6", Color= "#2E95D8" },
       new HierarchicalDetails()   { Id= "8", Role= "Development Supervisor", Manager= "6", Color= "#2E95D8" },
       new HierarchicalDetails()   { Id= "9", Role= "Drafting Supervisor", Manager= "6", Color= "#2E95D8" },
       new HierarchicalDetails()   { Id= "10", Role= "Operation Manager", Manager= "1", ChartType= "right", Color= "#1859B7" },
       new HierarchicalDetails()   { Id= "11", Role= "Statistic Department", Manager= "10", Color= "#2E95D8" },
     
   };
} 

In this example, a root node is defined with no ParentID, ensuring the layout generates correctly. Child nodes reference this root node using the Manager field.

You can download a complete working sample here.

Conclusion:

This guide helps you understand the importance of setting ParentID to empty for root nodes when using the Syncfusion® Blazor Diagram component. This practice ensures the layout is generated correctly and relationships between nodes are properly maintained.

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, Direct-Trac, or feedback portal. We are always happy to assist you!