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 |