Class SubTreeAlignments

Specifies the subtree alignments in an organizational chart.

Inheritance

System.Object

SubTreeAlignments

Namespace: Syncfusion.Blazor.Diagrams

Assembly: Syncfusion.Blazor.dll

Syntax

public sealed class SubTreeAlignments : Enum

Remarks

To know more about using the Subtree Alignments, refer to this link

1. Organizational chart

To apply the Subtree Alignments, use the below code.

Examples

<SfDiagram Height="600px" NodeDefaults="@NodeDefaults" ConnectorDefaults="@ConnectorDefaults" Layout="@LayoutValue">
   <DiagramDataSource Id = "Id" ParentId="Team" DataSource="@DataSource" ></DiagramDataSource>
</SfDiagram>
@code {
   //Initializing layout
   DiagramLayout LayoutValue;
   protected override void OnInitialized()
   {
       LayoutValue = new DiagramLayout()
       {
           //Sets layout type as OrganizationalChart...
           Type = LayoutType.OrganizationalChart,
           VerticalSpacing = 50,
           HorizontalSpacing = 40,
           //Initialize the layout info for the org chart layout
           LayoutInfo = new TreeInfo
           {
               Orientation = SubTreeOrientation.Vertical,
               CanEnableSubTree = true,
           }
       };
   }
   //Initializing node defaults
   DiagramNode NodeDefaults = new DiagramNode()
   {
       Width = 150,
       Height = 50,
       Annotations = new ObservableCollection<DiagramNodeAnnotation>() { new DiagramNodeAnnotation() { Id = "label1", Style = new AnnotationStyle() { Color = "white" } }, },
       Style = new NodeShapeStyle { Fill = "#6BA5D7", StrokeColor = "black", },
       LayoutInfo = new DiagramNodeLayoutInfo()
       {
           Orientation = Orientation.Vertical,
           Type = SubTreeAlignments.Right
       }
   };
   //Initializing connector defaults
   DiagramConnector ConnectorDefaults = new DiagramConnector()
   {
       Type = Syncfusion.Blazor.Diagrams.Segments.Orthogonal,
       Style = new ConnectorShapeStyle() { StrokeColor = "#6BA5D7", StrokeWidth = 1 },
       TargetDecorator = new ConnectorTargetDecorator()
       {
           Shape = DecoratorShapes.None,
           Style = new DecoratorShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7", },
       }
   };
   public class OrgChartDataModel
   {
       public string Id { get; set; }
       public string Team { get; set; }
       public string Role { get; set; }
   }
   public object DataSource = new List<object>()
   {
       new OrgChartDataModel() { Id= "1", Role= "General Manager" },
       new OrgChartDataModel() { Id= "2", Role= "Human Resource Manager", Team= "1" },
       new OrgChartDataModel() { Id= "3", Role= "Design Manager", Team= "1" },
       new OrgChartDataModel() { Id= "4", Role= "Operation Manager", Team= "1" },
       new OrgChartDataModel() { Id= "5", Role= "Marketing Manager", Team= "1" }
   };
}

Fields

Alternate

Aligns the child nodes at both left and right sides of the parent in a vertical subtree.

Declaration

public const SubTreeAlignments Alternate

Field Value

Type	Description
SubTreeAlignments

Balanced

Aligns the child nodes in multiple rows to balance the width and height of the horizontal subtree.

Declaration

public const SubTreeAlignments Balanced

Field Value

Type	Description
SubTreeAlignments

Center

Aligns the child nodes at the center of the parent in a horizontal subtree.

Declaration

public const SubTreeAlignments Center

Field Value

Type	Description
SubTreeAlignments

Left

Aligns the child nodes at the left of the parent in a horizontal/vertical subtree.

Declaration

public const SubTreeAlignments Left

Field Value

Type	Description
SubTreeAlignments

Right

Aligns the child nodes at the right of the parent in a horizontal/vertical subtree.

Declaration

public const SubTreeAlignments Right

Field Value

Type	Description
SubTreeAlignments

value__

Declaration

public int value__

Field Value

Type	Description
System.Int32