Diagram - Layouts

Demo Configurator

Choose LayoutTree Down
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The layout of a diagram consists in arranging the shapes (sometimes also the connections) in some fashion in order to achieve an aesthetically pleasing experience to the user. It aims at giving a more direct insight in the information contained within the diagram and its relational structure.

The RadDiagram control has more than 11 built-in layouts. To take advantage of them you should enable layouting in the LayoutSettings property. Then use the Type(Tree, Layered, Force-directed) and Subtype properties to define the desired layout.

On a technical level, layout consists of a multitude of algorithms and optimizations:

  • analysis of the relational structure (loops, multi-edge occurrence...)
  • connectedness of the diagram and the splitting into disconnected components
  • crossings of connections
  • bends and length of links

and various ad-hoc calculations which depend on the type of layout. The criteria on which an algorithm is based vary but the common denominator is:

  • a clean separation of connected components (subgraphs)
  • an orderly organization of the shapes in such a way that siblings are close to another, i.e. a tight packing of shapes which belong together (parent of child relationship)
  • a minimum of connection crossings
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Diagram.Layouts.DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadDiagram ID="theDiagram" runat="server" Height="600">
            <LayoutSettings Enabled="true" RadialFirstLevelSeparation="90" RadialSeparation="50" />
            <ClientEvents OnLoad="diagram_load" />
            <ShapeDefaultsSettings Width="40" Height="40" Type="Circle">
                <FillSettings Color="#39f" />
            </ShapeDefaultsSettings>
            <ShapesCollection>
                <telerik:DiagramShape Id="s1">
                    <FillSettings Color="#f55" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="s2" />
                <telerik:DiagramShape Id="s3" />
                <telerik:DiagramShape Id="s4" />
                <telerik:DiagramShape Id="s5" />
                <telerik:DiagramShape Id="s6" />
                <telerik:DiagramShape Id="s7" />
                <telerik:DiagramShape Id="s8" />
                <telerik:DiagramShape Id="s9" />
            </ShapesCollection>
            <ConnectionsCollection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="s1" />
                    <ToSettings ShapeId="s2" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="s1" />
                    <ToSettings ShapeId="s3" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="s2" />
                    <ToSettings ShapeId="s4" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="s2" />
                    <ToSettings ShapeId="s5" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="s3" />
                    <ToSettings ShapeId="s6" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="s6" />
                    <ToSettings ShapeId="s7" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="s6" />
                    <ToSettings ShapeId="s8" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="s3" />
                    <ToSettings ShapeId="s9" />
                </telerik:DiagramConnection>
            </ConnectionsCollection>
        </telerik:RadDiagram>
    </div>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View runat="server">
                <qsf:DropDownList ID="layoutChooser" Label="Choose Layout" OnClientItemSelected="changeLayoutHandler" ExpandDirection="Up" runat="server">
                    <Items>
                        <telerik:DropDownListItem Text="Tree Down" Value="tree-down" />
                        <telerik:DropDownListItem Text="Tree Up" Value="tree-up" />
                        <telerik:DropDownListItem Text="Tree Left" Value="tree-left" />
                        <telerik:DropDownListItem Text="Tree Right" Value="tree-right" />
                        <telerik:DropDownListItem Text="Tip-Over Tree" Value="tree-tipover" />
                        <telerik:DropDownListItem Text="Radial Tree" Value="tree-radial" />
                        <telerik:DropDownListItem Text="Layered Horizontal" Value="layered-horizontal" />
                        <telerik:DropDownListItem Text="Layered Vertical" Value="layered-vertical" />
                        <telerik:DropDownListItem Text="Force-directed" Value="force" />
                        <telerik:DropDownListItem Text="Mindmap Horizontal" Value="tree-mindmaphorizontal" />
                        <telerik:DropDownListItem Text="Mindmap Vertical" Value="tree-mindmapvertical" />
                    </Items>
                </qsf:DropDownList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?