Blazor

Upgrade Guide User Guide Demos Support Forums Download
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class DiagramLayout - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    Class DiagramLayout

    Represents the class to arrange the nodes and connectors in a tree structure.

    Inheritance
    System.Object
    SfDiagramBase
    DiagramLayout
    Inherited Members
    SfDiagramBase.UpdateCollection(IList, Boolean)
    SfDiagramBase.RandomString(Int32)
    Namespace: Syncfusion.Blazor.Diagrams
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class DiagramLayout : SfDiagramBase
    Remarks
    There are various layout modes available for user`s, they are as follows
    1. Hierarchical layout
    2. Organization chart
    3. Mind Map layout
    4. Radial tree
    5. Symmetric layout
    6. Complex hierarchical tree layout
    The following code demonstrates, how to define the Hierarchical layout and its properties.
    Examples
      
    <SfDiagram id="diagram" Height="600px" Nodes="@NodeCollection" @ref="@Diagram" Connectors="@ConnectorCollection" NodeDefaults="@NodeDefaults" ConnectorDefaults="@ConnectorDefaults" Layout="@LayoutValue">
    </SfDiagram>
    @code {
      SfDiagram Diagram;
      public async Task DownloadDiagram()
      {
     string data = await Diagram.SaveDiagram();
      }
      ObservableCollection<DiagramNode>
          NodeCollection;
      ObservableCollection<DiagramConnector>
         ConnectorCollection;
      //Uses layout to auto-arrange nodes on the diagram page
      DiagramLayout LayoutValue = new DiagramLayout()
      {
           //Sets layout type as HierarchicalTree...
           Type = LayoutType.HierarchicalTree,
           VerticalSpacing = 40,
           HorizontalSpacing = 40,
      };
      //Sets the default properties for nodes
      DiagramNode NodeDefaults = new DiagramNode()
      {
        Height = 40,
        Width = 100,
        //Initializing the default node's shape style
        Style = new NodeShapeStyle() { Fill = "darkcyan", StrokeWidth = 3, StrokeColor = "Black" },
        Annotations = new ObservableCollection<DiagramNodeAnnotation()
        {
            new DiagramNodeAnnotation() { Style = new AnnotationStyle() { Color = "white", Bold = true }, }
        }
       };
       //Sets the default properties for the connectors
       DiagramConnector ConnectorDefaults = new DiagramConnector()
       {
         Type = Syncfusion.Blazor.Diagrams.Segments.Orthogonal,
       };
       protected override void OnInitialized()
       {
         //Initializing node and connectors
         NodeCollection = new ObservableCollection<DiagramNode>()
          {  new DiagramNode(){Id="node1",Annotations = new ObservableCollection<DiagramNodeAnnotation>
             (){new DiagramNodeAnnotation(){Content="Steve-Ceo"}}},
             new DiagramNode(){Id="node2",Annotations = new ObservableCollection<DiagramNodeAnnotation>
             (){new DiagramNodeAnnotation(){Content="Kevin-Manager"}}},
             new DiagramNode(){Id="node3",Annotations = new ObservableCollection<DiagramNodeAnnotation>
             (){new DiagramNodeAnnotation(){Content="Peter-Manager"}}},
           };
          ConnectorCollection = new ObservableCollection<DiagramConnector()
         {
            new DiagramConnector(){Id="connector1",SourceID="node1",TargetID="node2"},
            new DiagramConnector(){Id="connector2",SourceID="node1",TargetID="node3"},
          };
        }
     }

    Constructors

    DiagramLayout()

    Represents the class to arrange the nodes and connectors in a tree structure.

    Declaration
    public DiagramLayout()

    Properties

    Arrangement

    Child nodes will be arranged in linear way Or Non linear way in complex layout.

    Declaration
    public ChildArrangement Arrangement { get; set; }
    Property Value
    Type Description
    ChildArrangement

    Bounds

    Aligns the layout within the given bounds.

    Declaration
    public object Bounds { get; set; }
    Property Value
    Type Description
    System.Object

    ConnectionDirection

    Specifies the Connection segment direction, by default it`s auto.

    Declaration
    public ConnectionDirection ConnectionDirection { get; set; }
    Property Value
    Type Description
    ConnectionDirection
    Remarks
    The following list shows the ConnectionDirection types.
    1. Auto - Defines the first segment direction based on the type of layout
    2. Orientation - Defines the first segment direction based on the orientation of the layout.
    3. Custom - Defines the first segment direction dynamically by the user.

    ConnectionPointOrigin

    connect the connector to node without overlapping in automatic layout.

    Declaration
    public ConnectionPointOrigin ConnectionPointOrigin { get; set; }
    Property Value
    Type Description
    ConnectionPointOrigin

    ConnectorSegments

    Specifies whether the segments must be customized based on the layout or not.

    Declaration
    public ConnectorSegments ConnectorSegments { get; set; }
    Property Value
    Type Description
    ConnectorSegments
    Remarks
    The following list shows the ConnectionSegments types.
    1. Default - Routes the connectors like a default diagram.
    2. Layout - Routes the connectors based on the type of the layout.

    EnableAnimation

    Enables/Disables animation option when a node is expanded/collapsed.

    Declaration
    public bool EnableAnimation { get; set; }
    Property Value
    Type Description
    System.Boolean
    Examples
      
    protected override void OnInitialized()
    {
     LayoutValue = new DiagramLayout()
     {
      Type = LayoutType.HierarchicalTree,
      VerticalSpacing = 30,
      HorizontalSpacing = 30,
      EnableAnimation = true,
      LayoutInfo = this.LayoutInfo
     };
    }

    FixedNode

    Sets the name of the node concerning which all other nodes will be translated.

    Declaration
    public string FixedNode { get; set; }
    Property Value
    Type Description
    System.String

    HorizontalAlignment

    Describes how the layout should be positioned or stretched in HorizontalAlignment.

    Declaration
    public HorizontalAlignment HorizontalAlignment { get; set; }
    Property Value
    Type Description
    HorizontalAlignment

    HorizontalSpacing

    Specifies the space that must be horizontally left between the nodes. It is 30, by default.

    Declaration
    public double HorizontalSpacing { get; set; }
    Property Value
    Type Description
    System.Double

    LayoutInfo

    Sets the layout properties using node property.

    Declaration
    public TreeInfo LayoutInfo { get; set; }
    Property Value
    Type Description
    TreeInfo
    Examples
      
    TreeInfo LayoutInfo = new TreeInfo()
     {
       CanEnableSubTree = true,
       Orientation = SubTreeOrientation.Horizontal
      };
     protected override void OnInitialized()
     {
       LayoutValue = new DiagramLayout()
      {
        Type = LayoutType.HierarchicalTree,
        VerticalSpacing = 30,
        HorizontalSpacing = 30,
        EnableAnimation = true,
        LayoutInfo = this.LayoutInfo
       };
     }

    Margin

    Specifies the space between the viewport and the layout. By default {left:50, top:50, right:0, bottom:0}.

    Declaration
    public LayoutMargin Margin { get; set; }
    Property Value
    Type Description
    LayoutMargin
    Examples
      
    DiagramLayout LayoutValue = new DiagramLayout()
    {
      Type = LayoutType.ComplexHierarchicalTree,
      HorizontalSpacing = 40,
      VerticalSpacing = 40,
      Orientation = LayoutOrientation.TopToBottom,
      Margin = new LayoutMargin() { Left = 20, Top = 20 },
    };

    MaxIteration

    Sets the maximum no of iteration of the layout. It is 30, by default.

    Declaration
    public double MaxIteration { get; set; }
    Property Value
    Type Description
    System.Double

    Orientation

    Specifies the orientation of the layout.

    Declaration
    public LayoutOrientation Orientation { get; set; }
    Property Value
    Type Description
    LayoutOrientation

    Root

    Specifies the parent node of the layout.

    Declaration
    public string Root { get; set; }
    Property Value
    Type Description
    System.String

    SpringFactor

    Specifies the edge attraction and vertex repulsion forces. More sibling nodes repel each other.

    Declaration
    public double SpringFactor { get; set; }
    Property Value
    Type Description
    System.Double

    SpringLength

    Sets how long edges should be, ideally of the layout.

    Declaration
    public double SpringLength { get; set; }
    Property Value
    Type Description
    System.Double

    Type

    This type property is used to define the type of the layout.

    Declaration
    public LayoutType Type { get; set; }
    Property Value
    Type Description
    LayoutType

    VerticalAlignment

    Describes how the layout should be positioned or stretched in VerticalAlignment.

    Declaration
    public VerticalAlignment VerticalAlignment { get; set; }
    Property Value
    Type Description
    VerticalAlignment

    VerticalSpacing

    Specifies the space that must be Vertically left between the nodes. It is 30, by default.

    Declaration
    public double VerticalSpacing { get; set; }
    Property Value
    Type Description
    System.Double
    Back to top Generated by DocFX
    Copyright © 2001 - 2021 Syncfusion Inc. All Rights Reserved