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

In the 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 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 diagram elements.

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!