Class Layout

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

Inheritance

object

ComponentBase

OwningComponentBase

SfOwningComponentBase

Layout

Implements

Inherited Members

ComponentBase.Assets

ComponentBase.AssignedRenderMode

ComponentBase.DispatchExceptionAsync(Exception)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.OnAfterRender(bool)

ComponentBase.OnInitialized()

ComponentBase.OnParametersSet()

ComponentBase.RendererInfo

ComponentBase.SetParametersAsync(ParameterView)

ComponentBase.ShouldRender()

ComponentBase.StateHasChanged()

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.MemberwiseClone()

object.ReferenceEquals(object, object)

object.ToString()

OwningComponentBase.Dispose(bool)

OwningComponentBase.IsDisposed

OwningComponentBase.ScopedServices

Namespace: Syncfusion.Blazor.Diagram

Assembly: Syncfusion.Blazor.dll

Syntax

public class Layout : SfOwningComponentBase, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Remarks

This class provides functionality to organize diagram elements, such as nodes and connectors, into various layouts based on specified algorithms.

Examples

<SfDiagramComponent Height="600px">
    <Layout Type = "LayoutType.OrganizationalChart"/>
</SfDiagramComponent>

Constructors

Layout()

Declaration

public Layout()

Properties

Bounds

Gets or sets the bounds that define the rectangular area for aligning the Layout within the diagram.

Declaration

[Parameter]
[JsonPropertyName("bounds")]
public DiagramRect? Bounds { get; set; }

Property Value

Type	Description
DiagramRect	A DiagramRect representing the rectangular boundary for layout alignment. The default value is null.

Remarks

The Bounds property defines the rectangular area within which the layout will be aligned and positioned. When set, the layout algorithm will arrange nodes within these specified boundaries.

This property is applicable for Organization Chart, Hierarchical Tree, and Complex Hierarchical Tree layout types. When null, the layout uses the entire available diagram space for positioning.

Examples

This example demonstrates how to set bounds for an organizational chart layout.

<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

Gets or sets the callback to trigger when the bounds changes.

Declaration

[JsonIgnore]
[Parameter]
public EventCallback<DiagramRect> BoundsChanged { get; set; }

Property Value

Type	Description
EventCallback<DiagramRect>	An EventCallback<TValue> of type DiagramRect that triggers when the bounds change. The default value is null.

ChildContent

Gets or sets the child content of the layout.

Declaration

[Parameter]
[JsonIgnore]
public RenderFragment? ChildContent { get; set; }

Property Value

Type	Description
RenderFragment	A RenderFragment representing the child content of the layout. The default value is null.

FixedNode

Gets or sets the identifier of the node that remains stationary while all other nodes are translated.

Declaration

[Parameter]
[JsonIgnore]
public string? FixedNode { get; set; }

Property Value

Type	Description
string	A string representing the node identifier. The default value is null.

Remarks

The FixedNode property is used to specify a particular node in the diagram around which other nodes are adjusted when the layout is recalculated.

Examples

The following example demonstrates how to use the FixedNode property in a diagram component:

<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

Gets or sets the callback to trigger when the fixed node changes.

Declaration

[JsonIgnore]
[Parameter]
public EventCallback<string> FixedNodeChanged { get; set; }

Property Value

Type	Description
EventCallback<string>	An EventCallback<TValue> of type string that triggers when the fixed node changes. The default value is null.

FlowchartLayoutSettings

Gets or sets the flowchart layout settings that configure branch directions and decision values for the Layout.

Declaration

[Parameter]
[JsonPropertyName("flowchartLayoutSettings")]
public FlowchartLayoutSettings? FlowchartLayoutSettings { get; set; }

Property Value

Type	Description
FlowchartLayoutSettings	A FlowchartLayoutSettings representing the configuration for flowchart layout behavior. The default value is `new FlowchartLayoutSettings()` with YesBranchDirection set to LeftInFlow, NoBranchDirection set to RightInFlow, YesBranchValues containing "Yes" and "True", and NoBranchValues containing "No" and "False".

Remarks

This property is applicable only when the Type property is set to Flowchart and controls how decision nodes branch in different directions based on their connector labels or values.

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

Gets or sets the callback triggered when the FlowchartLayoutSettings property changes.

Declaration

[JsonIgnore]
[Parameter]
public EventCallback<FlowchartLayoutSettings> FlowchartLayoutSettingsChanged { get; set; }

Property Value

Type	Description
EventCallback<FlowchartLayoutSettings>	An EventCallback<TValue> of type FlowchartLayoutSettings that triggers when the settings change. The default value is null.

GetBranch

Gets or sets a function that determines the branch type for nodes in a mind map layout.

Declaration

[JsonIgnore]
[Parameter]
public Func<IDiagramObject, BranchType>? GetBranch { get; set; }

Property Value

Type	Description
Func<IDiagramObject, BranchType>	A Func<T, TResult> that takes an IDiagramObject and returns a BranchType. The default value is null.

GetLayoutInfo

Gets or sets a function used to configure every subtree of the organizational chart layout.

Declaration

[JsonIgnore]
[Parameter]
public Func<IDiagramObject, TreeInfo, TreeInfo>? GetLayoutInfo { get; set; }

Property Value

Type	Description
Func<IDiagramObject, TreeInfo, TreeInfo>	A Func<T1, T2, TResult> that takes an IDiagramObject and TreeInfo as parameters and returns a modified TreeInfo. The default value is null.

HorizontalAlignment

Gets or sets the horizontal alignment of the Layout.

Declaration

[Parameter]
[JsonPropertyName("horizontalAlignment")]
public HorizontalAlignment HorizontalAlignment { get; set; }

Property Value

Type	Description
HorizontalAlignment	A HorizontalAlignment specifying the horizontal positioning behavior of the layout. The default value is Auto.

Remarks

This property is applicable only for HierarchicalTree, ComplexHierarchicalTree, and OrganizationalChart layouts.

Examples

The following example demonstrates how to set the horizontal alignment for an organizational chart layout:

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

HorizontalAlignmentChanged

Gets or sets the callback to trigger when the horizontal alignment changes.

Declaration

[JsonIgnore]
[Parameter]
public EventCallback<HorizontalAlignment> HorizontalAlignmentChanged { get; set; }

Property Value

Type	Description
EventCallback<HorizontalAlignment>	An EventCallback<TValue> of type HorizontalAlignment that triggers when the alignment changes. The default value is null.

HorizontalSpacing

Gets or sets the horizontal spacing between nodes in the SfDiagramComponent layout.

Declaration

[Parameter]
[JsonPropertyName("horizontalSpacing")]
public int HorizontalSpacing { get; set; }

Property Value

Type	Description
int	An int representing the horizontal space in pixels that must be left between nodes. The default value is `30`.

Remarks

This property controls the horizontal gap between adjacent nodes when the layout is applied to the diagram.

The spacing value is measured in pixels and affects the overall width and visual density of the layout arrangement.

Examples

The following example demonstrates how to set custom horizontal and vertical spacing for an organizational chart layout.

<SfDiagramComponent Height = "600px" >
    <Layout Type = "LayoutType.OrganizationalChart"
            @bind-HorizontalSpacing="@HorizontalSpacing" 
            @bind-VerticalSpacing="@VerticalSpacing">
    </Layout>
</SfDiagramComponent>
@code
{
   int HorizontalSpacing = 40;
   int VerticalSpacing = 50;
}

HorizontalSpacingChanged

Gets or sets the callback to trigger when the horizontal spacing changes.

Declaration

[JsonIgnore]
[Parameter]
public EventCallback<int> HorizontalSpacingChanged { get; set; }

Property Value

Type	Description
EventCallback<int>	An EventCallback<TValue> of type int that triggers when the spacing changes. The default value is null.

LinearArrangement

Gets or sets a value indicating whether the child nodes are arranged in a linear or non-linear manner within the Layout.

Declaration

[Parameter]
[JsonPropertyName("arrangement")]
public bool LinearArrangement { get; set; }

Property Value

Type	Description
bool	A bool indicating the arrangement pattern of child nodes. true arranges child nodes in a linear manner; false arranges them in a non-linear manner. The default value is false.

Examples

The following example demonstrates how to set linear arrangement for a complex hierarchical tree layout:

<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

Gets or sets the callback to trigger when the LinearArrangement value changes.

Declaration

[JsonIgnore]
[Parameter]
public EventCallback<bool> LinearArrangementChanged { get; set; }

Property Value

Type	Description
EventCallback<bool>	An EventCallback<TValue> of type bool that triggers when the LinearArrangement value changes. The default value is null.

Margin

Gets or sets the space between the viewport and the Layout.

Declaration

[Parameter]
[JsonPropertyName("margin")]
public LayoutMargin? Margin { get; set; }

Property Value

Type	Description
LayoutMargin	A LayoutMargin representing the margin spacing around the layout area. The default value is `new LayoutMargin() { Left = 50, Top = 50, Right = 0, Bottom = 0 }`.

Remarks

The margin property defines the buffer space between the diagram viewport boundaries and the actual layout content, allowing for proper spacing and visual separation of the layout.

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

Gets or sets the callback that is invoked when the Margin property value changes.

Declaration

[JsonIgnore]
[Parameter]
public EventCallback<LayoutMargin> MarginChanged { get; set; }

Property Value

Type	Description
EventCallback<LayoutMargin>	An EventCallback<TValue> that represents the callback function to execute when the margin changes. The default value is null.

Orientation

Gets or sets the orientation of the Layout. This property determines the directional flow of nodes in the diagram layout.

Declaration

[Parameter]
[JsonPropertyName("orientation")]
public LayoutOrientation Orientation { get; set; }

Property Value

Type	Description
LayoutOrientation	A LayoutOrientation specifying the directional arrangement of nodes in the layout. The default value is TopToBottom.

Remarks

When the Type property is set to Flowchart, only TopToBottom and LeftToRight orientations are supported and applicable.

Examples

The following example demonstrates how to set the orientation for an organizational chart layout:

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

OrientationChanged

Gets or sets the callback to trigger when the orientation changes.

Declaration

[JsonIgnore]
[Parameter]
public EventCallback<LayoutOrientation> OrientationChanged { get; set; }

Property Value

Type	Description
EventCallback<LayoutOrientation>	An EventCallback<TValue> of type LayoutOrientation that triggers on orientation change. The default value is null.

Root

Gets or sets the root (primary) node of the Layout.

Declaration

[Parameter]
[JsonIgnore]
public string? Root { get; set; }

Property Value

Type	Description
string	A string representing the identifier of the root node in the data source. The default value is null.

Remarks

This property is applicable only for the RadialTree and MindMap layout types.

Ensure that the specified root node exists in the data source for proper layout rendering.

Examples

The following example demonstrates how to set the root node for a RadialTree layout:

<SfDiagramComponent Height="600px">
    <DataSourceSettings ID="Id" Root="1" ParentID="Team" DataSource="@DataSource"></DataSourceSettings>   
    <Layout Type="LayoutType.RadialTree" Root="1"
            @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" },
       new OrgChartDataModel() { Id = "2", Team = "1", Role = "Assistant Manager" },
       new OrgChartDataModel() { Id = "3", Team = "1", Role = "Human Resource Manager" },
   };
}

SamePoint

Gets or sets a value indicating whether to arrange the connectors without overlapping in the Layout.

Declaration

[Parameter]
[JsonPropertyName("samePoint")]
public bool SamePoint { get; set; }

Property Value

Type	Description
bool	A bool indicating whether connectors should be arranged without overlapping. The default value is true.

Remarks

When set to true, the layout algorithm ensures that connectors do not overlap with each other, providing cleaner visual representation. When set to false, connectors may overlap.

Examples

The following example demonstrates how to configure connector arrangement in a hierarchical layout.

<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

Gets or sets the callback to trigger when the Samepoint value changes.

Declaration

[JsonIgnore]
[Parameter]
public EventCallback<bool> SamePointChanged { get; set; }

Property Value

Type	Description
EventCallback<bool>	An EventCallback<TValue> of type bool that triggers when the Samepoint value changes. The default value is null.

Type

Gets or sets the type of layout for the Layout.

Declaration

[Parameter]
[JsonPropertyName("type")]
public LayoutType Type { get; set; }

Property Value

Type	Description
LayoutType	A LayoutType specifying the arrangement algorithm to be applied. The default value is None.

Remarks

The layout type determines how nodes and connectors are automatically arranged within the diagram.

Examples

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

TypeChanged

Gets or sets the callback to trigger when the type changes.

Declaration

[JsonIgnore]
[Parameter]
public EventCallback<LayoutType> TypeChanged { get; set; }

Property Value

Type	Description
EventCallback<LayoutType>	An EventCallback<TValue> of type LayoutType that triggers when the type changes. The default value is null.

VerticalAlignment

Gets or sets the vertical alignment of the Layout.

Declaration

[Parameter]
[JsonPropertyName("verticalAlignment")]
public VerticalAlignment VerticalAlignment { get; set; }

Property Value

Type	Description
VerticalAlignment	A VerticalAlignment specifying the vertical positioning behavior of the layout. The default value is Auto.

Remarks

This property is applicable only for HierarchicalTree, ComplexHierarchicalTree, and OrganizationalChart layouts, controlling how the entire layout structure is aligned within the diagram container.

Examples

The following example demonstrates how to set the vertical alignment for an organizational chart layout:

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

VerticalAlignmentChanged

Gets or sets the callback to trigger when the vertical alignment changes.

Declaration

[JsonIgnore]
[Parameter]
public EventCallback<VerticalAlignment> VerticalAlignmentChanged { get; set; }

Property Value

Type	Description
EventCallback<VerticalAlignment>	An EventCallback<TValue> of type VerticalAlignment that triggers when the alignment changes. The default value is null.

VerticalSpacing

Gets or sets the vertical spacing between nodes in the Layout.

Declaration

[Parameter]
[JsonPropertyName("verticalSpacing")]
public int VerticalSpacing { get; set; }

Property Value

Type	Description
int	An int representing the vertical space in pixels that must be left between nodes. The default value is `30`.

Remarks

This property controls the vertical gap between nodes when the layout is applied to the diagram. Increasing this value creates more vertical space between nodes, while decreasing it makes the layout more compact vertically.

The spacing is measured in pixels and works in conjunction with HorizontalSpacing to define the overall node spacing in the layout.

Examples

The following example demonstrates how to set vertical spacing in a diagram layout.

<SfDiagramComponent Height = "600px" >
    <Layout Type = "LayoutType.OrganizationalChart"
            @bind-HorizontalSpacing="@HorizontalSpacing" 
            @bind-VerticalSpacing="@VerticalSpacing">
    </Layout>
</SfDiagramComponent>
@code
{
   int HorizontalSpacing = 40;
   int VerticalSpacing = 50;
}

VerticalSpacingChanged

Gets or sets the callback to trigger when the vertical spacing changes.

Declaration

[JsonIgnore]
[Parameter]
public EventCallback<int> VerticalSpacingChanged { get; set; }

Property Value

Type	Description
EventCallback<int>	An EventCallback<TValue> of type int that triggers when the vertical spacing changes. The default value is null.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

Dispose()

This method releasing all unmanaged resources.

Declaration

public void Dispose()

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
bool	firstRender	Set to true for the first time component rendering; otherwise gets false.

Returns

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

Overrides

ComponentBase.OnAfterRenderAsync(bool)

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

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

Overrides

ComponentBase.OnInitializedAsync()

OnParametersSetAsync()

Method invoked when any changes in component state occur.

Declaration

protected override Task OnParametersSetAsync()

Returns

Type	Description
Task	="Task".

Overrides

ComponentBase.OnParametersSetAsync()

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable