Diagram nodes and connectors not displaying properly
hi,
I tried to display dynamic collection of nodes and connectors
.But its not displaying properly.
@using Syncfusion.Blazor.Diagram
@using System.Net.Http
@inject HttpClient Http
@using FamilyTree_Application.Data
@using Syncfusion.Blazor.Data
<h3>MemberTree</h3>
<SfDiagramComponent Height="600px" Nodes="@nodes" Connectors="@connectors" NodeCreating="@OnNodeCreating" ConnectorCreating="@OnConnectorCreating">
<Layout Type="LayoutType.HierarchicalTree" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-VerticalSpacing="@VerticalSpacing">
</Layout>
</SfDiagramComponent>
@code
{
protected List<Node_data> Node_Datas = new List<Node_data>();
protected List<Connector_data> Connector_Datas = new List<Connector_data>();
int left = 40;
int top = 50;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
int HorizontalSpacing = 40;
int VerticalSpacing = 40;
private void OnNodeCreating(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 TextStyle() { Color = "white", Bold = true },
}
};
}
private void OnConnectorCreating(IDiagramObject connector)
{
(connector as Connector).Type = ConnectorSegmentType.Orthogonal;
}
protected override async Task OnInitializedAsync()
{
Node_Datas = await Http.GetFromJsonAsync<List<Node_data>>("sample-data/node1.json");
Connector_Datas = await Http.GetFromJsonAsync<List<Connector_data>>("sample-data/connect1.json");
foreach (var a in Node_Datas)
{
Node node= new Node()
{
ID = a.ID,Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation { Content = a.Content} },
};
nodes.Add(node);
}
connectors = new DiagramObjectCollection<Connector>();
foreach (var a in Connector_Datas)
{
Connector connector= new Connector() { ID = a.ID, SourceID = a.Source_Id, TargetID = a.Target_Id };
connectors.Add(connector);
}
}
}
Hi Ranjitha,
Thank you for your reply. But its not helping. On page load dispays
one arrow, after clicking arrow it shows nodes and connectors.
