Blazor

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

    Show / Hide Table of Contents

    Class Layout

    Represents the class for arranging the nodes and connectors in a tree structure.

    Inheritance
    System.Object
    Layout
    Namespace: Syncfusion.Blazor.Diagram
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class Layout : OwningComponentBase

    Constructors

    Layout()

    Declaration
    public Layout()

    Properties

    Bounds

    Aligns the layout within the given bounds.

    Declaration
    public DiagramRect Bounds { get; set; }
    Property Value
    Type Description
    DiagramRect
    Examples
    <SfDiagramComponent Height = "600px" >
        <Layout Type = "LayoutType.OrganizationalChart"
                @bind-HorizontalSpacing="@HorizontalSpacing" 
                @bind-VerticalSpacing="@VerticalSpacing"
                Bounds="@bounds">
        </Layout>
    </SfDiagramComponent>
    @code
    {
     private DiagramRect bounds = new Rect(200, 200, 500, 500);
       int HorizontalSpacing = 40;
       int VerticalSpacing = 50;
    }

    BoundsChanged

    Specifies the callback to trigger when the bounds changes.

    Declaration
    public EventCallback<DiagramRect> BoundsChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<DiagramRect>

    ChildContent

    Gets or sets the child content of the layout.

    Declaration
    public RenderFragment ChildContent { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.RenderFragment

    FixedNode

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

    Declaration
    public string FixedNode { get; set; }
    Property Value
    Type Description
    System.String
    Examples
    <SfDiagramComponent Height = "600px" >
        <DataSourceSettings ID = "Id" ParentID="Team" DataSource="@DataSource"></DataSourceSettings>   
        <Layout Type = "LayoutType.OrganizationalChart"
                @bind-FixedNode="null"
                GetLayoutInfo="GetLayoutInfo">
        </Layout>
    </SfDiagramComponent>
    @code
    {
       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" },
       };
    }

    FixedNodeChanged

    Specifies the callback to trigger when the fixed node changes.

    Declaration
    public EventCallback<string> FixedNodeChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<System.String>

    GetBranch

    Returns the branch type of the layout. Applicable only if it is a mind map layout.

    Declaration
    public Func<IDiagramObject, BranchType> GetBranch { get; set; }
    Property Value
    Type Description
    System.Func<IDiagramObject, BranchType>

    GetLayoutInfo

    GetLayoutInfo is used to configure every subtree of the organizational chart.

    Declaration
    public Func<IDiagramObject, TreeInfo, TreeInfo> GetLayoutInfo { get; set; }
    Property Value
    Type Description
    System.Func<IDiagramObject, TreeInfo, TreeInfo>

    HorizontalAlignment

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

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

    The default value will be Auto

    Examples
    <SfDiagramComponent Height = "600px" >
        <Layout Type = "LayoutType.OrganizationalChart"
                Orientation="LayoutOrientation.BottomToTop"
                HorizontalAlignment="HorizontalAlignment.Auto"
                GetLayoutInfo="GetLayoutInfo">
        </Layout>
    </SfDiagramComponent>

    HorizontalAlignmentChanged

    Specifies the callback to trigger when the horizontal alignment changes.

    Declaration
    public EventCallback<HorizontalAlignment> HorizontalAlignmentChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<HorizontalAlignment>

    HorizontalSpacing

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

    Declaration
    public int HorizontalSpacing { get; set; }
    Property Value
    Type Description
    System.Int32
    Examples
    <SfDiagramComponent Height = "600px" >
        <Layout Type = "LayoutType.OrganizationalChart"
                @bind-HorizontalSpacing="@HorizontalSpacing" 
                @bind-VerticalSpacing="@VerticalSpacing">
        </Layout>
    </SfDiagramComponent>
    @code
    {
       int HorizontalSpacing = 40;
       int VerticalSpacing = 50;
    }

    HorizontalSpacingChanged

    Specifies the callback to trigger when the horizontal spacing changes.

    Declaration
    public EventCallback<int> HorizontalSpacingChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<System.Int32>

    LinearArrangement

    Gets or sets the value indicates whether the child nodes are arranged either linear or non-linear manner in layout.

    Declaration
    public bool LinearArrangement { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, the child nodes are arranged in linear manner; Otherwise, false. The default value is false

    Examples
     
    
    </summary>  
    <example>  
    <code>  
    <![CDATA[  
    <SfDiagramComponent @ref="@Diagram" Height="499px"  
    ConnectorCreating="@ConnectorDefaults" NodeCreating="@NodeDefaults">  
    <DataSourceSettings ID = "Name" ParentID="Category" DataSource="DataSource">   </DataSourceSettings>  
    <Layout @bind-Type="LayoutType.ComplexHierarchicalTree"  
    LinearArrangement = "false"></Layout>              
    </SfDiagramComponent>            

    LinearArrangementChanged

    Specifies the callback to trigger when the LinearArrangement value changes.

    Declaration
    public EventCallback<bool> LinearArrangementChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<System.Boolean>

    Margin

    Specifies the space between the viewport and the layout.

    Declaration
    public LayoutMargin Margin { get; set; }
    Property Value
    Type Description
    LayoutMargin

    The default value will be LayoutMargin{left:50, top:50, right:0, bottom:0}

    Examples
    <SfDiagramComponent Height = "600px" >
        <Layout Type = "LayoutType.OrganizationalChart">
                 <LayoutMargin @bind-Top="10" @bind-Bottom="10" @bind-Right="10" @bind-Left="10"></LayoutMargin>
        </Layout>
    </SfDiagramComponent>

    MarginChanged

    Specifies the callback to trigger when the margin changes.

    Declaration
    public EventCallback<bool> MarginChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<System.Boolean>

    Orientation

    Specifies the orientation of the layout.

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

    The default value will be TopToBottom

    Examples
    <SfDiagramComponent Height = "600px" >
        <DataSourceSettings ID = "Id"  Root="1"  ParentID="Team" DataSource="@DataSource"></DataSourceSettings>   
        <Layout Type = "LayoutType.OrganizationalChart"
                Orientation="LayoutOrientation.BottomToTop">
        </Layout>
    </SfDiagramComponent>

    OrientationChanged

    Specifies the callback to trigger when the orientation changes.

    Declaration
    public EventCallback<LayoutOrientation> OrientationChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<LayoutOrientation>

    Root

    Specifies the parent node of the layout.

    Declaration
    public string Root { get; set; }
    Property Value
    Type Description
    System.String
    Examples
    <SfDiagramComponent Height = "600px">
        <DataSourceSettings ID = "Id"  Root="1"  ParentID="Team" DataSource="@DataSource"></DataSourceSettings>   
        <Layout Type = "LayoutType.OrganizationalChart"
                @bind-HorizontalSpacing="@HorizontalSpacing" 
                @bind-VerticalSpacing="@VerticalSpacing">
        </Layout>
    </SfDiagramComponent>
    @code
    {
       int HorizontalSpacing = 40;
       int VerticalSpacing = 50;
       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" },
       };
    }

    SamePoint

    Gets or sets the value indicates whether to arrange the connectors with or without overlapping in layout.

    Declaration
    public bool SamePoint { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, To arrange connectors without overlapping in other connectors. Otherwise, false. The default value is true.

    Examples
     
    
    </summary>  
    <example>  
    <code>  
    <![CDATA[  
    <SfDiagramComponent @ref="@Diagram" Height="499px"  
    ConnectorCreating="@ConnectorDefaults" NodeCreating="@NodeDefaults">  
    <DataSourceSettings ID = "Name" ParentID="Category" DataSource="DataSource">   </DataSourceSettings>  
    <Layout @bind-Type="LayoutType.ComplexHierarchicalTree"  
    SamePoint= "true"></Layout>              
    </SfDiagramComponent>            

    SamePointChanged

    Specifies the callback to trigger when the Samepoint value changes.

    Declaration
    public EventCallback<bool> SamePointChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<System.Boolean>

    Type

    Defines the type of layout.

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

    The default value will be None

    Examples
    <SfDiagramComponent Height = "600px" >
        <Layout Type = "LayoutType.OrganizationalChart"
                Orientation="LayoutOrientation.BottomToTop"
                VerticalAlignment="VerticalAlignment.Auto">
        </Layout>
    </SfDiagramComponent>

    TypeChanged

    Specifies the callback to trigger when the type changes.

    Declaration
    public EventCallback<LayoutType> TypeChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<LayoutType>

    VerticalAlignment

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

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

    The default value will be Auto

    Examples
    <SfDiagramComponent Height = "600px" >
        <Layout Type = "LayoutType.OrganizationalChart"
                Orientation="LayoutOrientation.BottomToTop"
                VerticalAlignment="VerticalAlignment.Auto"
                GetLayoutInfo="GetLayoutInfo">
        </Layout>
    </SfDiagramComponent>

    VerticalAlignmentChanged

    Specifies the callback to trigger when the vertical alignment changes.

    Declaration
    public EventCallback<VerticalAlignment> VerticalAlignmentChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<VerticalAlignment>

    VerticalSpacing

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

    Declaration
    public int VerticalSpacing { get; set; }
    Property Value
    Type Description
    System.Int32
    Examples
    <SfDiagramComponent Height = "600px" >
        <Layout Type = "LayoutType.OrganizationalChart"
                @bind-HorizontalSpacing="@HorizontalSpacing" 
                @bind-VerticalSpacing="@VerticalSpacing">
        </Layout>
    </SfDiagramComponent>
    @code
    {
       int HorizontalSpacing = 40;
       int VerticalSpacing = 50;
    }

    VerticalSpacingChanged

    Specifies the callback to trigger when the vertical spacing changes.

    Declaration
    public EventCallback<int> VerticalSpacingChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<System.Int32>

    Methods

    BuildRenderTree(RenderTreeBuilder)

    Declaration
    protected override void BuildRenderTree(RenderTreeBuilder __builder)
    Parameters
    Type Name Description
    Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

    Dispose()

    This method releasing all unmanaged resources.

    Declaration
    public void Dispose()

    OnAfterRenderAsync(Boolean)

    Method invoked after each time the component has been rendered.

    Declaration
    protected override Task OnAfterRenderAsync(bool firstRender)
    Parameters
    Type Name Description
    System.Boolean firstRender

    Set to true for the first time component rendering; otherwise gets false.

    Returns
    Type Description
    System.Threading.Tasks.Task

    A System.Threading.Tasks.Task representing any asynchronous operation.

    OnInitializedAsync()

    Method invoked when the component is ready to start.

    Declaration
    protected override Task OnInitializedAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    A System.Threading.Tasks.Task representing any asynchronous operation.

    OnParametersSetAsync()

    Method invoked when any changes in component state occur.

    Declaration
    protected override Task OnParametersSetAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    ="Task".

    Back to top Generated by DocFX
    Copyright © 2001 - 2023 Syncfusion Inc. All Rights Reserved