How to specify parent child relationship in Blazor Diagram Datasource?

Blazor Diagram provides support to auto-arrange the nodes in the diagram area, which is referred to as Layout. It includes the following layout modes:

Layout modes:

• Hierarchical layout
• Organization chart
• Mind Map layout

To create a layout of the above types with the DataSourceSettings, you must define the DataSource property, either as a collection of objects or as an instance of DataSource that needs to be populated in the diagram. The ID property is used to define the unique field of each JSON data, and the ParentID property is used to define the parent field, which builds the relationship between the ID and parent field. The ID and ParentID properties’ data types are strings in DataSourceSettings. When creating a parent-child relationship, it’s essential to ensure that at least one node has an empty ParentID, which will act as the root or parent node, with other nodes linked as its children.

For example, let’s consider the data source settings where we have defined all necessary details. The EmployeeDetails class has attributes such as EmployeeID, ReportsTo, and other details. In this scenario, the initial dataset does not have a value for ReportsTo, so it is set as empty. This node acts as the parent or root node of the layout. Subsequent datasets, however, do contain a value for ReportsTo.

Below is a code example illustrating this:

@using Syncfusion.Blazor.Diagram

<div id="diagram-space" class="content-wrapper">
   /* Initialize the diagram component */
   <SfDiagramComponent @ref="Diagram" Height="400px" NodeCreating="OnNodeCreating" ConnectorCreating="OnConnectorCreating">
       /* Define the data source settings */
       <DataSourceSettings Id="EmployeeID" ParentId="ReportsTo" DataSource="DataSource" >
       </DataSourceSettings>
       /* Define the snap settings */
       <SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
       /* Define the layout settings */
       <Layout @bind-Type="type"
               @bind-HorizontalSpacing="@HorizontalSpacing"
               @bind-Orientation="@orientation"
               @bind-VerticalSpacing="@VerticalSpacing"
               @bind-HorizontalAlignment="@horizontalAlignment"
               @bind-VerticalAlignment="@verticalAlignment"
               GetLayoutInfo="GetLayoutInfo">
           <LayoutMargin Top="50" Bottom="50" Right="50" Left="50" />
       </Layout>
   </SfDiagramComponent>
</div>

@code {
   //Reference the diagram
   SfDiagramComponent Diagram;
   // Specify the layout type.
   LayoutType type = LayoutType.HierarchicalTree;
   // Specify the orientation of the layout.
   LayoutOrientation orientation = LayoutOrientation.TopToBottom;
   /// Specifies the horizontal alignment of the diagram nodes.
   private HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto;

   // Specifies the vertical alignment of the diagram nodes.
   private VerticalAlignment verticalAlignment = VerticalAlignment.Auto;

   // The spacing between diagram nodes horizontally.
   private int HorizontalSpacing = 30;

   // The spacing between diagram nodes vertically.
   private int VerticalSpacing = 30;

   // The X-coordinate offset for the initial position of the diagram nodes.
   private float x = 100;

   // The Y-coordinate offset for the initial position of the diagram nodes.
   private float y = 100;

   // Represents the details of an employee.
   public class EmployeeDetails
   {
       /// <summary>
       /// Gets or sets the employee ID.
       /// </summary>
       public string EmployeeID { get; set; }

       /// <summary>
       /// Gets or sets the first name of the employee.
       /// </summary>
       public string FirstName { get; set; }

       /// <summary>
       /// Gets or sets the ID of the employee's supervisor.
       /// </summary>
       public string ReportsTo { get; set; }

       /// <summary>
       /// Gets or sets the country of the employee.
       /// </summary>
       public string Country { get; set; }

       /// <summary>
       /// Gets or sets the designation of the employee.
       /// </summary>
       public string Designation { get; set; }
   }


   /// <summary>
   /// Handles the creation of a diagram node with specific properties and styles based on employee details.
   /// </summary>
   /// <param name="obj">The diagram object that is being created.</param>
   /// <remarks>
   /// This method configures the node's position, size, shape, and style. It also sets the node's annotations
   /// and applies different fill colors based on the employee's first name.
   /// </remarks>
   private void OnNodeCreating(IDiagramObject obj)
   {
       Node node = obj as Node;
       node.OffsetX = x;
       node.OffsetY = y;
       node.Width = 80;
       node.Height = 40;
       node.Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle, CornerRadius = 8 };
       node.Style = new ShapeStyle() { StrokeWidth = 0, Fill = "" };
       x += 100;

       EmployeeDetails data = node.Data as EmployeeDetails;
       node.Annotations = new DiagramObjectCollection<ShapeAnnotation>() {
           new ShapeAnnotation() {
               Content = data.FirstName.ToString(),
               Style = new TextStyle() { Color = "white" }
           }
       };

       switch (data.FirstName.ToString())
       {
           case "Andrew":
               node.Style.Fill = "#3A4857";
               break;
           case "Nancy":
               node.Style.Fill = "#2B8C68";
               break;
           case "Janet":
               node.Style.Fill = "#488CC1";
               break;
           case "Margaret":
               node.Style.Fill = "#4C888F";
               break;
           case "Steven":
               node.Style.Fill = "#8E4DB4";
               break;
           case "Laura":
               node.Style.Fill = "#CD6A32";
               break;
           default:
               node.Style.Fill = "#8E4DB4";
               break;
       }
   }

   /// <summary>
   /// Handles the creation of a diagram connector with specific properties and styles.
   /// </summary>
   /// <param name="obj">The diagram object that is being created.</param>
   /// <remarks>
   /// This method configures the connector's style, type, and decorators.
   /// It sets the stroke color, segment type, and hides both source and target decorators.
   /// </remarks>
   private void OnConnectorCreating(IDiagramObject obj)
   {
       Connector connector = obj as Connector;
       connector.Style.StrokeColor = "#048785";
       connector.Type = ConnectorSegmentType.Orthogonal;
       connector.TargetDecorator.Shape = DecoratorShape.None;
       connector.SourceDecorator.Shape = DecoratorShape.None;
       connector.Style = new ShapeStyle() { StrokeColor = "#3A4857", Fill = "#3A4857", StrokeWidth = 1, StrokeDashArray = "3,3" };
   }

   // Create the layout info.
   private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options)
   {
       // Enable the sub-tree.
       options.EnableSubTree = true;
       // Specify the subtree orientation.
       options.Orientation = Orientation.Horizontal;
       return options;
   }

   // Create the data source with node name and fill color values.
   public List<EmployeeDetails> DataSource = new List<EmployeeDetails>()
   {
         new EmployeeDetails { EmployeeID = "1", FirstName = "Andrew", Designation = "CEO", Country = "England", ReportsTo = "" },
         new EmployeeDetails { EmployeeID = "2", FirstName = "Nancy", Designation = "Product Manager", Country = "USA", ReportsTo = "1" },
         new EmployeeDetails { EmployeeID = "3", FirstName = "Janet", Designation = "Product Manager", Country = "USA", ReportsTo = "1" },
         new EmployeeDetails { EmployeeID = "4", FirstName = "Margaret", Designation = "Product Manager", Country = "USA", ReportsTo = "1" },
         new EmployeeDetails { EmployeeID = "5", FirstName = "Steven", Designation = "Product Manager", Country = "England", ReportsTo = "1" },
         new EmployeeDetails { EmployeeID = "7", FirstName = "Michael", Designation = "Team Lead", Country = "USA", ReportsTo = "5" },
         new EmployeeDetails { EmployeeID = "8", FirstName = "Robert", Designation = "Developer ", Country = "England", ReportsTo = "5" },
         new EmployeeDetails { EmployeeID = "9", FirstName = "Anne", Designation = "Developer", Country = "USA", ReportsTo = "5" },
         new EmployeeDetails { EmployeeID = "6", FirstName = "Laura", Designation = "HR", Country = "USA", ReportsTo = "1" },
   };
}

You can download a complete working sample from GitHub.

Conclusion:

We hope you enjoyed learning about how to specify parent-child relationships in Blazor Diagram Datasource.

​You can refer to our Blazor ​Diagram feature tour page to learn about its other groundbreaking features. You can also explore our Blazor Diagram documentation to understand how to present 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 comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!