All docs
V20.2
20.2
20.1
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

DiagramAutoLayoutSettings.Type Property

Specifies the diagram layout type.

Namespace: DevExpress.Web.ASPxDiagram

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

Declaration

[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.
Diagram - Tree Layout

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.
Diagram - Layered Layout

Property Paths

You can access this nested property as listed below:

Library Object Type Path to Type
ASP.NET Controls and MVC Extensions ASPxDiagram
ASP.NET MVC Extensions DiagramSettings
MVCxDiagram

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.

    Diagram - Layered Layout

  • 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.

    Diagram - Tree Layout

NOTE

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

<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

See Also