Class Orientation
Specifies the orientation of the layouts.
Inheritance
System.Object
Orientation
Namespace: Syncfusion.Blazor.Diagrams
Assembly: Syncfusion.Blazor.dll
Syntax
public sealed class Orientation : Enum
Remarks
To know more about using Orientation, refer to these links |
1. DataBinding |
2. Overview |
3. Layout |
To apply hierarchical layout orientation, use the below code. |
Examples
<SfDiagram ID="diagram" Height="600px" Layout="@LayoutValue" ConnectorDefaults="@ConnectorDefault" NodeDefaults="@NodeDefaults" SelectedItems="@selectedItems">
<DiagramDataSource Id = "Name" ParentId="Category" DataSource="@DataSource">
<DiagramDataMapSettings>
<DiagramDataMapSetting Property = "Shape.TextContent" Field="Name"></DiagramDataMapSetting>
<DiagramDataMapSetting Property = "Style.StrokeColor" Field="FillColor"></DiagramDataMapSetting>
<DiagramDataMapSetting Property = "Style.Fill" Field="FillColor"></DiagramDataMapSetting>
</DiagramDataMapSettings>
</DiagramDataSource>
<DiagramPageSettings>
<DiagramFitOptions CanFit = "true" Mode="FitModes.Width"></DiagramFitOptions>
</DiagramPageSettings>
</SfDiagram>
@code{
DiagramSelectedItems selectedItems = new DiagramSelectedItems()
{
Constraints = SelectorConstraints.All & ~SelectorConstraints.ResizeAll & ~SelectorConstraints.Rotate
};
TreeInfo LayoutInfo = new TreeInfo()
{
CanEnableSubTree = true,
Orientation = SubTreeOrientation.Horizontal
};
DiagramLayout LayoutValue = new DiagramLayout() { };
DiagramConnector ConnectorDefault = new DiagramConnector()
{
TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.None },
Type = Segments.Orthogonal,
Style = new ConnectorShapeStyle() { StrokeColor = "#6d6d6d" },
Constraints = 0,
CornerRadius = 5
};
DiagramNode NodeDefaults = new DiagramNode
{
Style = new NodeShapeStyle() { Fill = "#659be5", StrokeColor = "none", Color = "white", StrokeWidth = 2, },
BackgroundColor = "#659be5",
Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Text, Margin = new BasicShapeMargin() { Left = 10, Right = 10, Bottom = 10, Top = 10 } },
ExpandIcon = new NodeExpandIcon()
{
Height = 10,
Width = 10,
Shape = IconShapes.Minus,
Fill = "lightgray",
Offset = new IconOffset() { X = 0.5, Y = 1 },
VerticalAlignment = VerticalAlignment.Auto,
Margin = new ExpandIconMargin() { Bottom = 0, Left = 0, Right = 0, Top = 0 }
},
CollapseIcon = new NodeCollapseIcon()
{
Offset = new IconOffset() { X = 0.5, Y = 1 },
VerticalAlignment = VerticalAlignment.Auto,
Height = 10,
Width = 10,
Shape = IconShapes.Plus,
Fill = "lightgray",
Padding = new IconPadding() { Top = 5 }
}
};
public class HierarchicalDetails
{
public string Name { get; set; }
public string FillColor { get; set; }
public string Category { get; set; }
}
public List<object> DataSource = new List<object>()
{
new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},
new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},
new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},
new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},
new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},
new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},
new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},
new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},
new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},
new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},
new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},
new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}
};
protected override void OnInitialized()
{
LayoutValue = new DiagramLayout()
{
Type = LayoutType.HierarchicalTree,
VerticalSpacing = 30,
HorizontalSpacing = 30,
EnableAnimation = true,
LayoutInfo = this.LayoutInfo
};
}
}
Fields
Horizontal
Sets the layout orientation as Horizontal.
Declaration
public const Orientation Horizontal
Field Value
Type | Description |
---|---|
Orientation |
value__
Declaration
public int value__
Field Value
Type | Description |
---|---|
System.Int32 |
Vertical
Sets the layout orientation as Vertical.
Declaration
public const Orientation Vertical
Field Value
Type | Description |
---|---|
Orientation |