Blazor

Code Examples Upgrade Guide User Guide Demos Support Forums Download
  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SubTreeAlignments

    Show / Hide Table of Contents

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