Class LayoutType

Specifies the type of automatic layout.

Inheritance

System.Object

LayoutType

Namespace: Syncfusion.Blazor.Diagrams

Assembly: Syncfusion.Blazor.dll

Syntax

public sealed class LayoutType : Enum

Remarks

To know more about using LayoutType, refer to these links>

Layout

To apply ComplexHierarchical Layout type, use the below code.

Examples

<SfDiagram @ref="@Diagram" id="diagram" Height="600px" tool="@DiagramTools.ZoomPan" NodeDefaults="@NodeDefaults" ConnectorDefaults="@ConnectorDefault" Layout="@LayoutValue">
       <DiagramDataSource Id = "Name" ParentId="ReportingPerson" DataMapSettings="@Datamap" DataSource="@DataSource"></DiagramDataSource>        
   </SfDiagram>
@code {
   SfDiagram Diagram;
   List<DiagramDataMapSetting> Datamap = new List<DiagramDataMapSetting>() {
       new DiagramDataMapSetting() { Property = "Style.fill", Field = "fillColor" },
       new DiagramDataMapSetting() { Property = "Style.strokeColor", Field = "border" }
   };
   DiagramLayout LayoutValue = new DiagramLayout()
   {
       Type = LayoutType.ComplexHierarchicalTree,
       HorizontalSpacing = 40,
       VerticalSpacing = 40,
       Orientation = LayoutOrientation.TopToBottom,
       Margin = new LayoutMargin() { Left = 20, Top = 20 },
   };
   DiagramNode NodeDefaults = new DiagramNode
   {
       Height = 40,
       Width = 40,
       Shape = new DiagramShape() { BasicShape = BasicShapes.Rectangle, Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, CornerRadius = 7 },
   };
   DiagramConnector ConnectorDefault = new DiagramConnector
   {
       Type = Syncfusion.Blazor.Diagrams.Segments.Orthogonal,
       CornerRadius = 7,
       TargetDecorator = new ConnectorTargetDecorator() { Width = 7, Height = 7 },
       Style = new ConnectorShapeStyle() { StrokeColor = "#6d6d6d" }
   };
   public class DataModel
   {
       public string Name;
       public string fillColor;
       public string border;
       public string[] ReportingPerson;
   }
   public object DataSource = new List<object>()
   {
       new DataModel { Name = "node11", fillColor = "#e7704c", border = "#c15433" },
       new DataModel {  Name = "node12", ReportingPerson = new string[]{ "node114" }, fillColor = "#efd46e", border = "#d6b123" },
       new DataModel {  Name = "node13", ReportingPerson = new string[] { "node12" }, fillColor = "#58b087", border = "#16955e" },
       new DataModel {  Name = "node14", ReportingPerson = new string[] { "node12" }, fillColor = "#58b087", border = "#16955e" },
       new DataModel {  Name = "node15", ReportingPerson = new string[] { "node12" }, fillColor = "#58b087", border = "#16955e" },
       new DataModel {  Name = "node16", ReportingPerson = new string[] {}, fillColor = "#14ad85" },
       new DataModel {  Name = "node17", ReportingPerson = new string[] { "node13", "node14", "node15" }, fillColor = "#659be5", border = "#3a6eb5" },
       new DataModel {  Name = "node18", ReportingPerson = new string[] {}, fillColor = "#14ad85" },
       new DataModel {  Name = "node19", ReportingPerson = new string[] { "node16", "node17", "node18" }, fillColor = "#8dbe6c", border = "#489911" },
       new DataModel {  Name = "node110", ReportingPerson = new string[] { "node16", "node17", "node18" }, fillColor = "#8dbe6c", border = "#489911" },
       new DataModel {  Name = "node111", ReportingPerson = new string[] { "node16", "node17", "node18", "node116" }, fillColor = "#8dbe6c", border = "#489911" },
       new DataModel {  Name = "node21", fillColor = "#e7704c", border = "#c15433" },
       new DataModel {  Name = "node22", ReportingPerson = new string[] { "node114" }, fillColor = "#efd46e", border = "#d6b123" },
       new DataModel {  Name = "node23", ReportingPerson = new string[] { "node22" }, fillColor = "#58b087", border = "#16955e" },
       new DataModel {  Name = "node24", ReportingPerson = new string[] { "node22" }, fillColor = "#58b087", border = "#16955e" },
       new DataModel {  Name = "node25", ReportingPerson = new string[] { "node22" }, fillColor = "#58b087", border = "#16955e" },
       new DataModel {  Name = "node26", ReportingPerson = new string[] {}, fillColor = "#14ad85" },
       new DataModel {  Name = "node27", ReportingPerson = new string[] { "node23", "node24", "node25" }, fillColor = "#659be5", border = "#3a6eb5" },
       new DataModel {  Name = "node28", ReportingPerson = new string[] {}, fillColor = "#14ad85" },
       new DataModel {  Name = "node29", ReportingPerson = new string[] { "node26", "node27", "node28", "node116" }, fillColor = "#8dbe6c", border = "#489911" },
       new DataModel {  Name = "node210", ReportingPerson = new string[] { "node26", "node27", "node28" }, fillColor = "#8dbe6c", border = "#489911" },
       new DataModel {  Name = "node211", ReportingPerson = new string[] { "node26", "node27", "node28" }, fillColor = "#8dbe6c", border = "#489911" },
       new DataModel {  Name = "node31", fillColor = "#e7704c", border = "#c15433" },
       new DataModel {  Name = "node114", ReportingPerson = new string[] { "node11", "node21", "node31" }, fillColor = "#f3904a", border = "#d3722e" },
       new DataModel {  Name = "node116", ReportingPerson = new string[] { "node12", "node22" }, fillColor = "#58b087", border = "#16955e" }
   };
}

Fields

ComplexHierarchicalTree

Defines the type of layout as complex HierarchicalTree.

Declaration

public const LayoutType ComplexHierarchicalTree

Field Value

Type	Description
LayoutType

HierarchicalTree

Defines the type of layout as a Hierarchical Tree.

Declaration

public const LayoutType HierarchicalTree

Field Value

Type	Description
LayoutType

MindMap

Defines the type of layout as Mind Map.

Declaration

public const LayoutType MindMap

Field Value

Type	Description
LayoutType

None

None of the layouts is applied.

Declaration

public const LayoutType None

Field Value

Type	Description
LayoutType

OrganizationalChart

Defines the type of layout as an Organizational Chart.

Declaration

public const LayoutType OrganizationalChart

Field Value

Type	Description
LayoutType

RadialTree

Defines the type of layout as a Radial tree.

Declaration

public const LayoutType RadialTree

Field Value

Type	Description
LayoutType

SymmetricalLayout

Defines the type of layout as a Symmetrical layout.

Declaration

public const LayoutType SymmetricalLayout

Field Value

Type	Description
LayoutType

value__

Declaration

public int value__

Field Value

Type	Description
System.Int32