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

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

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

public EventCallback<DiagramRect> BoundsChanged { get; set; }

Property Value

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

public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.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

public string FixedNode { get; set; }

Property Value

Type	Description
System.String	A System.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

public EventCallback<string> FixedNodeChanged { get; set; }

Property Value

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

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

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

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<FlowchartLayoutSettings>	An Microsoft.AspNetCore.Components.EventCallback<> 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

public Func<IDiagramObject, BranchType> GetBranch { get; set; }

Property Value

Type	Description
System.Func<IDiagramObject, BranchType>	A System.Func<, > 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

public Func<IDiagramObject, TreeInfo, TreeInfo> GetLayoutInfo { get; set; }

Property Value

Type	Description
System.Func<IDiagramObject, TreeInfo, TreeInfo>	A System.Func<, , > 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

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

public EventCallback<HorizontalAlignment> HorizontalAlignmentChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<HorizontalAlignment>	An Microsoft.AspNetCore.Components.EventCallback<> 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

public int HorizontalSpacing { get; set; }

Property Value

Type	Description
System.Int32	An System.Int32 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

public EventCallback<int> HorizontalSpacingChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Int32>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.Int32 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

public bool LinearArrangement { get; set; }

Property Value

Type	Description
System.Boolean	A System.Boolean 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

public EventCallback<bool> LinearArrangementChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Boolean>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.Boolean 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

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

public EventCallback<LayoutMargin> MarginChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<LayoutMargin>	An Microsoft.AspNetCore.Components.EventCallback<> 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

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

public EventCallback<LayoutOrientation> OrientationChanged { get; set; }

Property Value

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

public string Root { get; set; }

Property Value

Type	Description
System.String	A System.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

public bool SamePoint { get; set; }

Property Value

Type	Description
System.Boolean	A System.Boolean 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

public EventCallback<bool> SamePointChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Boolean>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.Boolean that triggers when the Samepoint value changes. The default value is null.

Type

Gets or sets the type of layout for the Layout.

Declaration

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

public EventCallback<LayoutType> TypeChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<LayoutType>	An Microsoft.AspNetCore.Components.EventCallback<> 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

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

public EventCallback<VerticalAlignment> VerticalAlignmentChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<VerticalAlignment>	An Microsoft.AspNetCore.Components.EventCallback<> 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

public int VerticalSpacing { get; set; }

Property Value

Type	Description
System.Int32	An System.Int32 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

public EventCallback<int> VerticalSpacingChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Int32>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.Int32 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
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".