Class SubTreeOrientation

Specifies the subtree orientation in layout.

Inheritance

System.Object

SubTreeOrientation

Namespace: Syncfusion.Blazor.Diagrams

Assembly: Syncfusion.Blazor.dll

Syntax

public sealed class SubTreeOrientation : Enum

Remarks

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

1. Organizational chart

2. Hierarchical layout

To apply vertical Subtree Orientation, 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

Horizontal

Horizontally aligns the child nodes.

Declaration

public const SubTreeOrientation Horizontal

Field Value

Type	Description
SubTreeOrientation

value__

Declaration

public int value__

Field Value

Type	Description
System.Int32

Vertical

Vertically aligns the child nodes.

Declaration

public const SubTreeOrientation Vertical

Field Value

Type	Description
SubTreeOrientation