DiagramAutoLayoutSettings.Type Property

Specifies the diagram layout type.

Namespace: DevExpress.Web.ASPxDiagram

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

NuGet Package: DevExpress.Web

Declaration

C#

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

VB.NET

<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 Controls and MVC Extensions	ASPxDiagram	.SettingsAutoLayout .Type
ASP.NET MVC Extensions	DiagramSettings	.SettingsAutoLayout .Type
	MVCxDiagram	.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

<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