Blazor

Upgrade Guide User Guide Demos Support Forums Download
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SubTreeOrientation - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    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
    Back to top Generated by DocFX
    Copyright © 2001 - 2022 Syncfusion Inc. All Rights Reserved