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
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
Microsoft.AspNetCore.Components.EventCallback<DiagramRect>

ChildContent

Gets or sets the child content of the layout.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type
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
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
Microsoft.AspNetCore.Components.EventCallback<System.String>

FlowchartLayoutSettings

Configures the flow settings for the layout.

Declaration

public FlowchartLayoutSettings FlowchartLayoutSettings { get; set; }

Property Value

Type	Description
FlowchartLayoutSettings	The default values are: YesBranchDirection is set to LeftInFlow, NoBranchDirection is set to RightInFlow, YesBranchValues are "Yes" and "True", and NoBranchValues are "No" and "False".

Remarks

This property is applicable only when the Type property is set to Flowchart.

Examples

Example usage:

<SfDiagramComponent Height="600px">
    <Layout Type="LayoutType.Flowchart" FlowchartLayoutSettings="@flowchartLayoutSettings" />
</SfDiagramComponent>
@code
{
    FlowchartLayoutSettings flowchartLayoutSettings = new FlowchartLayoutSettings() 
    { 
        YesBranchDirection = BranchDirection.RightInFlow,
        NoBranchDirection = BranchDirection.LeftInFlow,
        YesBranchValues = new List<string>() { "Accept", "Yes" },
        NoBranchValues = new List<string>() { "Reject", "No" }
    };
}

FlowchartLayoutSettingsChanged

Specifies the callback triggered when the FlowchartLayoutSettings property changes.

Declaration

public EventCallback<FlowchartLayoutSettings> FlowchartLayoutSettingsChanged { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<FlowchartLayoutSettings>

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
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
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
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
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
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
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<LayoutMargin> MarginChanged { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<LayoutMargin>

Orientation

Specifies the orientation of the layout.

Declaration

public LayoutOrientation Orientation { get; set; }

Property Value

Type	Description
LayoutOrientation	The default value will be TopToBottom

Remarks

Only the TopToBottom and LeftToRight orientations are applicable when the Type property is set to Flowchart.

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
Microsoft.AspNetCore.Components.EventCallback<LayoutOrientation>

Root

Specifies the parent node of the layout.

Declaration

public string Root { get; set; }

Property Value

Type
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
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
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
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
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
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".