Organizational Chart not displaying correctly
Hey I am making an organizational chart but I am facing some rendering issues.
I am facing two problems:
- Connectors are not attaching to the nodes correctly.
- When I zoom in or zoom out, connectors get zoomed in and change their position but the images don't get zoomed.
- Org chart to display correctly with connectors attached to the nodes
- Keep the nodes and connectors attached when I zoom in or zoom out on the chart
Attachment: OrgChart_bdee774e.zip
As you can see that the nodes donot get resized (zoomed) when i zoom in on the diagram (and I am using Organizational Chart not Automatic Layout)
I am using the following example code (from here https://blazor.syncfusion.com/demos/diagramcomponent/organization-model?theme=bootstrap5)
@page "/orgchart"
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Diagram
<div class="row">
<div id="diagram-space" class="col">
<SfDiagramComponent @ref="@Diagram" Height="690px" Width="100%" NodeCreating="@OnNodeCreating" ConnectorCreating="@OnConnectorCreating" InteractionController="@InteractionController.ZoomPan">
<ScrollSettings @bind-ScrollLimit="@scrollLimit"></ScrollSettings>
<DataSourceSettings ID="Id" ParentID="Manager" DataSource="DataSource2"></DataSourceSettings>
<Layout @bind-Type="@Type" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-Orientation="@OrientationType" @bind-VerticalSpacing="@VerticalSpacing" @bind-HorizontalAlignment="@HorizontalAlignment" @bind-VerticalAlignment="@VerticalAlignment" GetLayoutInfo="GetLayoutInfo">
<LayoutMargin @bind-Top="@Top" @bind-Bottom="@Bottom" @bind-Right="@Right" @bind-Left="@Left"></LayoutMargin>
</Layout>
<SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
<DiagramTemplates>
<NodeTemplate>
@{
Node node1 = (context as Node);
string Name = (node1.Data as OrganizationalDetails).Name;
string Role = (node1.Data as OrganizationalDetails).Role;
string Imageurl = (node1.Data as OrganizationalDetails).Imageurl;
<div class="e-orgchart-template-div-style" style="width:100%;height:100%;">
<div id="image" class="e-orgchart-template-image-style" style="background-image: url(@("https://img.icons8.com/stickers/344/user.png"));">
</div>
<div style="height:75%;float: right;margin-right: 20px">
<p class="e-orgchart-template-name-style">@Name</p>
<p class="e-orgchart-template-role-style">@Role</p>
</div>
</div>
}
</NodeTemplate>
</DiagramTemplates>
</SfDiagramComponent>
</div>
</div>
@code {
public class OrganizationalDetails
{
public string Id { get; set; }
public string Role { get; set; }
public string Color { get; set; } = "#2E95D8";
public string Manager { get; set; }
public string ChartType { get; set; } = "";
public string Name { get; set; }
public string Imageurl { get; set; } = "";
}
//DataSource Items.
public List<OrganizationalDetails> DataSource2 = new List<OrganizationalDetails>()
{
new OrganizationalDetails() { Id= "parent", Role= "CEO", Color = "#71AF17", Manager = "", ChartType = "", Name="Liam James", Imageurl="images/diagram/overview/image34.png" },
new OrganizationalDetails() { Id = "2", Role= "Product Manager", Color = "#1859B7", Manager = "parent", ChartType = "right", Name="Maria Andres", Imageurl="images/diagram/overview/image30.png"},
new OrganizationalDetails() { Id = "3", Role= "Software Engineer", Color = "#2E95D8", Manager = "2", ChartType ="", Name="John Steel", Imageurl="images/diagram/overview/image3.png"},
new OrganizationalDetails() { Id = "4", Role= "Software Engineer", Color = "#2E95D8", Manager = "2",ChartType = "", Name="Carlos Nagy", Imageurl="images/diagram/overview/image5.png"},
new OrganizationalDetails() { Id = "5", Role= "Software Engineer", Color = "#2E95D8", Manager = "2", ChartType ="", Name="Yoshi Wilson", Imageurl="images/diagram/overview/image22.png"},
new OrganizationalDetails() { Id = "6", Role= "Software Engineer", Color = "#2E95D8", Manager = "2", ChartType ="", Name="Thomas Hardy", Imageurl="images/diagram/overview/image31.png"},
new OrganizationalDetails() { Id = "7", Role= "Software Engineer", Color = "#2E95D8", Manager = "2", ChartType ="", Name="Peter Citeaux", Imageurl="images/diagram/overview/image21.png"},
new OrganizationalDetails() { Id = "8", Role= "Product Manager", Color = "#1859B7", Manager = "parent", ChartType ="right", Name="Pedro Afonso", Imageurl="images/diagram/overview/image26.png"},
new OrganizationalDetails() { Id = "9", Role= "Software Engineer",Color = "#2E95D8", Manager = "8", ChartType ="", Name="Roland Mendel", Imageurl="images/diagram/overview/image24.png"},
new OrganizationalDetails() { Id = "10", Role= "Software Engineer",Color = "#2E95D8", Manager = "8", ChartType = "", Name="Diego Roel", Imageurl="images/diagram/overview/image18.png"},
new OrganizationalDetails() { Id = "11", Role= "Software Engineer", Color = "#2E95D8", Manager = "8", ChartType = "", Name="Martine Rancé", Imageurl="images/diagram/overview/image11.png"},
new OrganizationalDetails() { Id = "12", Role= "Software Engineer", Color = "#2E95D8", Manager = "8", ChartType = "", Name="Maria Larsson", Imageurl="images/diagram/overview/image15.png"},
new OrganizationalDetails() { Id = "13", Role= "Software Engineer", Color = "#2E95D8", Manager = "8", ChartType = "", Name="Paolo Accorti", Imageurl="images/diagram/overview/image28.png"},
new OrganizationalDetails() { Id = "14", Role= "Product manager", Color = "#1859B7", Manager = "parent", ChartType ="right", Name="Helen Bennett", Imageurl="images/diagram/overview/image7.png"},
new OrganizationalDetails() { Id = "15", Role= "Software Engineer", Color = "#2E95D8", Manager = "14", ChartType = "", Name="Renate Jose", Imageurl="images/diagram/overview/image9.png"},
new OrganizationalDetails() { Id = "16", Role= "Software Engineer", Color = "#2E95D8", Manager = "14", ChartType ="", Name="Jaime Yorres", Imageurl="images/diagram/overview/image1.png"},
new OrganizationalDetails() { Id = "17", Role= "Software Engineer", Color = "#2E95D8", Manager = "14", ChartType ="", Name="Alex Feuer", Imageurl="images/diagram/overview/image23.png"},
new OrganizationalDetails() { Id = "18", Role= "Software Engineer", Color = "#2E95D8", Manager = "14", ChartType ="", Name="Helen Marie", Imageurl="images/diagram/overview/image12.png"},
new OrganizationalDetails() { Id = "19", Role= "Software Engineer", Color = "#2E95D8", Manager = "14", ChartType ="", Name="Yoshi Kenna", Imageurl="images/diagram/overview/image14.png"},
new OrganizationalDetails() { Id = "20", Role= "Product Manager", Color = "#1859B7", Manager = "parent", ChartType ="right", Name="Joseph Kaff", Imageurl="images/diagram/overview/image16.png"},
new OrganizationalDetails() { Id = "21", Role= "Software Engineer", Color = "#2E95D8", Manager = "20", ChartType ="", Name="Sergio roel", Imageurl="images/diagram/overview/image33.png"},
new OrganizationalDetails() { Id = "22", Role= "Software Engineer", Color = "#2E95D8", Manager = "20", ChartType ="", Name="Paula Wilson", Imageurl="images/diagram/overview/image6.png"},
new OrganizationalDetails() { Id = "23", Role= "Software Engineer", Color = "#2E95D8", Manager = "20",ChartType = "", Name="Mauri Moroni", Imageurl="images/diagram/overview/image53.png"},
new OrganizationalDetails() { Id = "24", Role= "Software Engineer", Color = "#2E95D8", Manager = "20", ChartType ="", Name="Janete Limeira", Imageurl="images/diagram/overview/image56.png"},
new OrganizationalDetails() { Id = "25", Role= "Software Engineer", Color = "#2E95D8", Manager = "20", ChartType ="", Name="Michael Holz", Imageurl="images/diagram/overview/image19.png"}
};
//DataSource Items.
public List<OrganizationalDetails> DataSource { get; set; } = new();
// Defines default values for DiagramNode object
public Node NodeDefaults { get; set; }
//Defines diagrams's nodes collection
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
ScrollLimitMode scrollLimit { get; set; } = ScrollLimitMode.Diagram;
private Orientation subTreeOrientation = Orientation.Vertical;
private SubTreeAlignmentType subTreeAlignment = SubTreeAlignmentType.Right;
private int rows = 0;
private string pattern;
private double offset = 20;
public SfDiagramComponent Diagram;
public LayoutOrientation OrientationType = LayoutOrientation.TopToBottom;
public int? HorizontalValue { get; set; } = 30;
public int? VerticalValue { get; set; } = 30;
public LayoutType Type = LayoutType.OrganizationalChart;
public HorizontalAlignment HorizontalAlignment = HorizontalAlignment.Auto;
public VerticalAlignment VerticalAlignment = VerticalAlignment.Auto;
public int HorizontalSpacing = 30;
public int VerticalSpacing = 30;
public double Top = 50;
public double Bottom = 50;
public double Right = 50;
public double Left = 50;
// Defines default values for Node object
private void OnNodeCreating(IDiagramObject obj)
{
Node node = obj as Node;
if (node.Data is System.Text.Json.JsonElement)
{
node.Data = System.Text.Json.JsonSerializer.Deserialize<OrganizationalDetails>(node.Data.ToString());
}
OrganizationalDetails organizationData = node.Data as OrganizationalDetails;
node.Width = 177;
node.Height = 54;
node.Shape = new Shape()
{
Type = Syncfusion.Blazor.Diagram.Shapes.HTML
};
}
// Defines default values for Connector object
private void OnConnectorCreating(IDiagramObject connector1)
{
Connector connector = (connector1 as Connector);
connector.Type = ConnectorSegmentType.Orthogonal;
connector.CornerRadius = 10;
connector.Style = new ShapeStyle()
{
StrokeWidth = 1,
StrokeDashArray = "1,1"
};
connector.TargetDecorator.Shape = DecoratorShape.None;
connector.SourceDecorator.Shape = DecoratorShape.None;
}
private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options)
{
if (rows == 0)
{
if (rows == 0 && options.Rows != null)
options.Rows = null;
Node node = obj as Node;
if (pattern == "LeftOrientationVertical50" || pattern == "RightOrientationVertical50")
{
options.Offset = -50;
}
if (!options.HasSubTree)
{
options.AlignmentType = subTreeAlignment;
options.Orientation = subTreeOrientation;
}
}
else
{
if (!options.HasSubTree)
{
options.AlignmentType = subTreeAlignment;
options.Orientation = subTreeOrientation;
options.Offset = offset;
}
}
return options;
}
}
<style>
#diagram {
display: block;
}
.e-orgchart-template-div-style {
position: relative;
width: 177px;
height: 54px;
border: 1px solid #EEEEEE;
background: #FFFFFF;
box-sizing: border-box;
border-radius: 5px;
}
.e-orgchart-template-image-style {
width: 52px;
height: 52px;
left: 552px;
top: 154px;
float: left;
background-size: 100% 100%;
}
.e-orgchart-template-name-style {
font-family: Roboto;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 14px;
letter-spacing: 0.1px;
color: #363636;
margin-top: 8px;
height: 8px
}
.e-orgchart-template-role-style {
font-family: Roboto;
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 14px;
letter-spacing: 0.1px;
color: #7A7A7A;
}
</style>
