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 |