DiagramAutoLayoutSettings.Type Property

Specifies the diagram layout type.

Namespace : DevExpress.Web.ASPxDiagram

Assembly : DevExpress.Web.ASPxDiagram.v25.2.dll

Declaration

C#
VB.NET

csharp

[DefaultValue(DiagramAutoLayout.Auto)]
public DiagramAutoLayout Type { get; set; }

<DefaultValue(DiagramAutoLayout.Auto)>
Public Property Type As DiagramAutoLayout

Property Value

Type	Default	Description
DiagramAutoLayout	Auto

The layout type.

Available values:

Name	Description
Auto

An auto-layout is disabled if the both shape coordinates (Left and Top) are specified; otherwise, the Layered layout is applied.

| | Tree |

The tree layout. This algorithm is used to draw hierarchical diagrams. It arranges shapes in a tree structure and aligns them evenly based on their hierarchical level.

| | Layered |

The layered (Sugiyama-style) layout. This algorithm is used to draw layered graphs. It minimizes the number of connector crossings and spreads shapes evenly.

Property Paths

You can access this nested property as listed below:

Library	Object Type	Path to Type
ASP.NET MVC Extensions	DiagramSettings

.SettingsAutoLayout .Type

| | ASP.NET Web Forms Controls | ASPxDiagram |

.SettingsAutoLayout .Type

Remarks

The Type property specifies an auto-layout algorithm that is used to automatically arrange shapes. The following algorithms are available.

The Layered (Sugiyama-style) layout. This algorithm is used to draw layered graphs. It minimizes the number of connector crossings and spreads shapes evenly.
The Tree layout. This algorithm is used to draw hierarchical diagrams. It arranges shapes in a tree structure and aligns them evenly based on their hierarchical level.

Note

When the Type property is set to Layered or Tree the shape coordinates specified by the Left and Top properties are ignored.

ASPX

aspx

<dx:ASPxDiagram ID="Diagram" runat="server" Width="100%" Height="600px" Units="Px"
    NodeDataSourceID="FlowNodeDemoDataSource" EdgeDataSourceID="FlowEdgeDemoDataSource" >
    <SettingsAutoLayout Type="Layered" Orientation="Vertical" />
    <Mappings>
        <Node Key="ID" Type="Type" Width="Width" Height="Height" />
        <Edge Key="ID" FromKey="FromID" ToKey="ToID" Text="Text" />
    </Mappings>
</dx:ASPxDiagram>

Run Demo: Node and Edge Data Sources