Blazor

Upgrade Guide User Guide Demos Support Forums Download
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class LayoutType - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    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
    Back to top Generated by DocFX
    Copyright © 2001 - 2021 Syncfusion Inc. All Rights Reserved