Hierarchical layout in Blazor Diagram Component
5 Aug 20213 minutes to read
The hierarchical tree layout arranges nodes in a tree-like structure, where the nodes in the hierarchical layout may have multiple parents. There is no need to specify the layout root. To arrange the nodes in a hierarchical structure, specify the layout Type as HierarchicalTree. The following example shows how to arrange the nodes in a hierarchical structure.
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Height="600px" Nodes="@NodeCollection" Connectors="@connectors" NodeDefaults="@NodeDefaults" ConnectorDefaults="@ConnectorDefaults">
<Layout Type="LayoutType.HierarchicalTree" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-VerticalSpacing="@VerticalSpacing">
</Layout>
<SnapSettings>
<HorizontalGridLines LineColor="white" LineDashArray="2,2">
</HorizontalGridLines>
<VerticalGridLines LineColor="white" LineDashArray="2,2">
</VerticalGridLines>
</SnapSettings>
</SfDiagramComponent>
@code {
DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
int HorizontalSpacing = 40;
int VerticalSpacing = 40;
private void NodeDefaults(IDiagramObject obj)
{
Node node = obj as Node;
node.Height = 40;
node.Width = 100;
//Initializing the default node's shape style
node.Style = new ShapeStyle() { Fill = "darkcyan", StrokeWidth = 3, StrokeColor = "Black" };
node.Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
new ShapeAnnotation { Content = node.Annotations[0].Content,Style = new TextShapeStyle() { Color = "white", Bold = true }, }
};
}
private void ConnectorDefaults(IDiagramObject connector)
{
(connector as Connector).Type = Segments.Orthogonal;
}
protected override void OnInitialized()
{
//Initializing node and connectors
NodeCollection = new DiagramObjectCollection<Node>()
{
new Node(){ID="node1",Annotations = new DiagramObjectCollection<ShapeAnnotation>(){new ShapeAnnotation{Content="Steve-Ceo"}}},
new Node(){ID="node2",Annotations = new DiagramObjectCollection<ShapeAnnotation>(){new ShapeAnnotation{Content="Kevin-Manager"}}},
new Node(){ID="node3",Annotations = new DiagramObjectCollection<ShapeAnnotation>(){new ShapeAnnotation{Content="Peter-Manager"}}},
new Node(){ID="node4",Annotations = new DiagramObjectCollection<ShapeAnnotation>(){new ShapeAnnotation{Content="Jim-CSE"}}},
new Node(){ID="node5",Annotations = new DiagramObjectCollection<ShapeAnnotation>(){new ShapeAnnotation{Content="Martin-CSE"}}},
new Node(){ID="node6",Annotations = new DiagramObjectCollection<ShapeAnnotation>(){new ShapeAnnotation{Content="John-Manager"}}},
new Node(){ID="node7",Annotations = new DiagramObjectCollection<ShapeAnnotation>(){new ShapeAnnotation{Content="Mary-CSE"}}},
};
connectors = new DiagramObjectCollection<Connector>()
{
new Connector(){ID="connector1",SourceID="node1",TargetID="node2"},
new Connector(){ID="connector2",SourceID="node1",TargetID="node3"},
new Connector(){ID="connector3",SourceID="node2",TargetID="node4"},
new Connector(){ID="connector4",SourceID="node2",TargetID="node5"},
new Connector(){ID="connector5",SourceID="node3",TargetID="node6"},
new Connector(){ID="connector6",SourceID="node3",TargetID="node7"},
};
}
}
Customizing the properties
Orientation
You can change the orientation at runtime. The following code is used to how to change the layout.
<SfDiagramComponent Height="600px" Width="500px" >
<Layout Type="LayoutType.HierarchicalTree" @bind-Orientation="@orientation"></Layout>
</SfDiagramComponent>
// Initializing the orientation value
LayoutOrientation orientation = LayoutOrientation.TopToBottom;
public void UpdateOrientation()
{
// Update LayoutOrientation in runtime
orientation = LayoutOrientation.BottomToTop;
}Spacing
You can change the horizontal and vertical spacing for the diagram layout.
<SfDiagramComponent @ref="diagram" Width="900px" Height="800px">
<Layout Type="LayoutType.HierarchicalTree" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-VerticalSpacing="@VerticalSpacing"/>
</SfDiagramComponent>
// Initializing the Horizontal and Vertical value
int HorizontalSpacing = 40;
int VerticalSpacing = 50;
// Update the spacing
public void UpdateSpacing()
{
Diagram.BeginUpdate();
HorizontalSpacing += 10;
VerticalSpacing += 10;
Diagram.EndUpdate();
}Margin
You can change the margin values for the diagram layout.
<SfDiagramComponent @ref="diagram" Width="900px" Height="800px" >
<Layout Type="LayoutType.HierarchicalTree">
<LayoutMargin Top="@top" Left="@left"></LayoutMargin>
</Layout>
</SfDiagramComponent>
// Initializing the Mergin Top and Left value
int left = 40;
int top = 50;
// Update the margin values
public void UpdateMargin()
{
Diagram.BeginUpdate();
left += 10;
top += 10;
Diagram.EndUpdate();
}