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 |