New to Telerik UI for ASP.NET MVC? Download free 30-day trial

DiagramLayoutSettingsBuilder

Methods

EndRadialAngle(System.Double)

Defines where the circle/arc ends. The positive direction is clockwise and the angle is in degrees. This setting is specific to the radial tree layout.

Parameters

value - System.Double

The value that configures the EndRadialAngle option.

Example


             @(Html.Kendo().Diagram()
               .Name("diagram")
               .Layout(l => l.EndRadialAngle(180))
             )

Grid(System.Action)

Each layout algorithm has a different set of parameters customizing the layout but they also all have a common collection of parameters which relate to the way 'pieces' of a diagram are organized. A diagram can have in general disconnected pieces, known as components, which can be organized in a way independent of the way a component on its own is arranged. In the picture above, this is one diagram consisting of four components.When you apply a certain layout an analysis will first split the diagram in components, arrange each component individually and thereafter organize the components in a grid. The common parameters referred above deal with this grid layout, they define the width, margin and padding of the (invisible) grid used to organize the components.

Parameters

configurator - System.Action<DiagramLayoutGridSettingsBuilder>

The action that configures the grid.

Example


             @(Html.Kendo().Diagram()
               .Name("diagram")
               .Layout(l => l.Grid(grid => grid.ComponentSpacingX(80).ComponentSpacingY(100).Width(1000)))
             )

HorizontalSeparation(System.Double)

Either the distance between the siblings if the tree is up/down or between levels if the tree is left/right. In tipOver tree layout this setting is used only for the direct children of the root

Parameters

value - System.Double

The value that configures the horizontal separation option.

Example


             @(Html.Kendo().Diagram()
               .Name("diagram")
               .Layout(l => l.HorizontalSeparation(100))
             )

Iterations(System.Double)

The number of times that all the forces in the Diagram are being calculated and balanced. The default is set at 300 which must be enough for Diagrams up to a hundred nodes. By increasing this parameter, you increase the correctness of the simulation but it does not always lead to a more stable topology. In some situations, the Diagram simply does not have a stable minimum energy state and oscillates (globally or locally) between the minima. In such a situation, increasing the iterations will not result in a better topology.

Parameters

value - System.Double

The value that configures the iterations.

Example


             @(Html.Kendo().Diagram()
               .Name("diagram")
               .Layout(l => l.Iterations(250))
             )

LayerSeparation(System.Double)

The height (in a vertical layout) or width (in a horizontal layout) between the layers.

Parameters

value - System.Double

The value that configures the LayerSeparation option.

Example


             @(Html.Kendo().Diagram()
               .Name("diagram")
               .Layout(l => l.LayerSeparation(100))
             )

NodeDistance(System.Double)

In the force-directed layout, the setting defines the optimal length between 2 nodes, which directly correlates to the state of the link between them. If a link is longer, there will be a force pulling the nodes together. If the link is shorter, the force will push the nodes apart. The optimal length is more an indication in the algorithm than a guarantee that all nodes will be at this distance. The result of the layout is a combination of the incidence structure of the Diagram, the initial topology (positions of the nodes), and the number of iterations. In the layered layout, it defines the minimum distance between nodes on the same level. Due to the nature of the algorithm, this distance will only be respected if the whole crossing of links and optimization does not induce a shift of the siblings. This setting is specific to the force-directed layout and layered layout

Parameters

value - System.Double

The value that configures the NodeDistance option.

Example


             @(Html.Kendo().Diagram()
               .Name("diagram")
               .Layout(l => l.NodeDistance(60))
             )

RadialFirstLevelSeparation(System.Double)

Controls the distance between the root and the immediate children of the root. This setting is specific to the radial tree layout.

Parameters

value - System.Double

The value that configures the RadialFirstLevelSeparation option.

Example


             @(Html.Kendo().Diagram()
               .Name("diagram")
               .Layout(l => l.RadialFirstLevelSeparation(210))
             )

RadialSeparation(System.Double)

Defines the radial separation between the levels (except the first one which is defined by the aforementioned radialFirstLevelSeparation). This setting is specific to the radial tree layout.

Parameters

value - System.Double

The value that configures the radial separation.

Example


             @(Html.Kendo().Diagram()
               .Name("diagram")
               .Layout(l => l.RadialSeparation(100))
             )

StartRadialAngle(System.Double)

Defines where the circle/arc starts. The positive direction is clockwise and the angle is in degrees. This setting is specific to the radial tree layout.

Parameters

value - System.Double

The value that configures the StartRadialAngle option.

Example


             @(Html.Kendo().Diagram()
               .Name("diagram")
               .Layout(l => l.StartRadialAngle(180))
             )

UnderneathHorizontalOffset(System.Double)

Defines the horizontal offset from a child with respect to its parent. This setting is specific to the tipOver tree layout.

Parameters

value - System.Double

The value that configures the horizontal offset.

Example


             @(Html.Kendo().Diagram()
               .Name("diagram")
               .Layout(l => l.UnderneathHorizontalOffset(20))
             )

UnderneathVerticalSeparation(System.Double)

Defines the vertical separation between siblings and sub-branches. This setting is specific to the tipOver tree layout.

Parameters

value - System.Double

The value that configures the vertical separation.

Example


             @(Html.Kendo().Diagram()
               .Name("diagram")
               .Layout(l => l.UnderneathVerticalSeparation(20))
             )

UnderneathVerticalTopOffset(System.Double)

Defines the vertical separation between a parent and its first child. This offsets the whole set of children with respect to its parent. This setting is specific to the tipOver tree layout.

Parameters

value - System.Double

The value that configures the vertical separation.

Example


             @(Html.Kendo().Diagram()
               .Name("diagram")
               .Layout(l => l.UnderneathVerticalTopOffset(20))
             )

VerticalSeparation(System.Double)

Either the distance between levels if the tree is up/down or between siblings if the tree is left/right. This property is not used in tipOver tree layout but rather replaced with three additional ones - UnderneathVerticalTopOffset, UnderneathVerticalSeparation and UnderneathHorizontalOffset.

Parameters

value - System.Double

The value that configures the VerticalSeparation option.

Example


             @(Html.Kendo().Diagram()
               .Name("diagram")
               .Layout(l => l.VerticalSeparation(80))
             )

Type(Kendo.Mvc.UI.DiagramLayoutType)

Specifies the layout type.

Parameters

value - DiagramLayoutType

The value that configures the type.

Example


             @(Html.Kendo().Diagram()
               .Name("diagram")
               .Layout(l => l.Type(DiagramLayoutType.Layered))
             )

Subtype(Kendo.Mvc.UI.DiagramLayoutSubtype)

Defines the layout type by specifying in greater detail the behavior expected by the layout algorithm.

Parameters

value - DiagramLayoutSubtype

The value that configures the subtype.

Example


             @(Html.Kendo().Diagram()
               .Name("diagram")
               .Layout(l => l.Subtype(DiagramLayoutSubtype.Tipover))
             )

TipOverTreeStartLevel(System.Int32)

Specifies the start level when the Subtype is "Tipover".

Parameters

value - System.Int32

The value that configures the start level.

Example


             @(Html.Kendo().Diagram()
               .Name("diagram")
               .Layout(l => l.Subtype(DiagramLayoutSubtype.Tipover).TipOverTreeStartLevel(2))
             )

In this article
Not finding the help you need?