Skip to main content

DiagramAutoLayoutSettings.Type Property

Specifies the diagram layout type.

Namespace: DevExpress.Web.ASPxDiagram

Assembly: DevExpress.Web.ASPxDiagram.v22.1.dll

Declaration

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

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 MVC Extensions DiagramSettings
MVCxDiagram
ASP.NET Web Forms Controls ASPxDiagram

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