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