Blazor

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

    Show / Hide Table of Contents

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