How to Customize Connector Styles in a Hierarchical Layout in Blazor Diagram

In Syncfusion® Blazor Diagram component, connectors in a hierarchical layout are rendered with default styles. This article demonstrates how to customize connector styles, such as removing the default decorator shape, by using the ConnectorCreating event.

Prerequisites
Ensure that:

• The Syncfusion.Blazor.Diagram package is installed in your Blazor project.
• The project is set up to use Syncfusion® components.

Customizing Connectors in Hierarchical Layouts
To customize connectors, use the ConnectorCreating event callback method to set default values, such as setting the DecoratorShape to None. Follow the steps below to set up a hierarchical layout with customized connectors.

Code Snippet:

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Height="600px" 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 {
  int HorizontalSpacing = 40;
  int VerticalSpacing = 40;

  /// <summary>
  /// Callback method to customize nodes when they are created.
  /// </summary>
  /// <param name="obj">The node object being created.</param>
  private void OnNodeCreating(IDiagramObject obj)
  {
      Node node = obj as Node;
      node.Height = 40;
      node.Width = 100;
      node.Style = new ShapeStyle() { Fill = "darkcyan", StrokeWidth = 3, StrokeColor = "Black" };
  }

  /// <summary>
  /// Callback method to customize connectors when they are created.
  /// </summary>
  /// <param name="connector">The connector object being created.</param>
  private void OnConnectorCreating(IDiagramObject connector)
  {
      (connector as Connector).Type = ConnectorSegmentType.Orthogonal;
      (connector as Connector).TargetDecorator.Shape = DecoratorShape.None;
  }

  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= "11", Role= "Assistant Manager", Manager= "parent", Color= "#71AF17" },
      new HierarchicalDetails() { Id= "2", Role= "Human Resource Manager", Manager= "parent", ChartType= "right", Color= "#1859B7" },
      new HierarchicalDetails() { Id= "3", Role= "Trainers", Manager= "parent", Color= "#2E95D8" },
      new HierarchicalDetails() { Id= "4", Role= "Recruiting Team", Manager= "1", Color= "#2E95D8" },
      new HierarchicalDetails() { Id= "5", Role= "Finance Asst. Manager", Manager= "1", Color= "#2E95D8" },
      new HierarchicalDetails() { Id= "6", Role= "Design Manager", Manager= "1", ChartType= "right", Color= "#1859B7" },
      new HierarchicalDetails() { Id= "7", Role= "Design Supervisor", Manager= "1", Color= "#2E95D8" },
      new HierarchicalDetails() { Id= "8", Role= "Development Supervisor", Manager= "1", Color= "#2E95D8" },
      new HierarchicalDetails() { Id= "9", Role= "Drafting Supervisor", Manager= "1", Color= "#2E95D8" },
      new HierarchicalDetails() { Id= "10", Role= "Operation Manager", Manager= "1", ChartType= "right", Color= "#1859B7" },
      new HierarchicalDetails() { Id= "11", Role= "Statistic Department", Manager= "1", Color= "#2E95D8" },
      new HierarchicalDetails() { Id= "12", Role= "Logistic Department", Manager= "1", Color= "#2E95D8" },
  };
}

Explanation

• OnNodeCreating Event: Customizes nodes with specific styles, including color and dimensions.
• OnConnectorCreating Event: Sets the connector style to orthogonal and removes the decorator shape, resulting in a clean connection style.

Example Screenshots:

Hierarchical Layout with Customized Connections

Hierarchical Layout with Default Styles:

you can download the complete working sample from here.

Conclusion:

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

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

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