Category / Section
How to change the parent child relationship in layout at runtime?
1 min read
In a Blazor Diagram, you can drag and drop a node onto another node using the drop event to establish a parent-child relationship. Also, enabling the AllowDrop constraints shows a highlighter when you drag a node and hover over another node.
Refer to the following code example to establish a parent-child relationship for runtime changes in the drop event.
<SfDiagramComponent Height="600px" @ref="diagram" NodeCreating="@OnNodeCreating" ConnectorCreating="@OnConnectorCreating" DragDrop="OnDrop">
<DataSourceSettings ID="Id" ParentID="Team" DataSource="@DataSource"></DataSourceSettings>
<SnapSettings>
<HorizontalGridLines LineColor="white" LineDashArray="2,2">
</HorizontalGridLines>
<VerticalGridLines LineColor="white" LineDashArray="2,2">
</VerticalGridLines>
</SnapSettings>
<Layout Type="LayoutType.OrganizationalChart" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-VerticalSpacing="@VerticalSpacing">
</Layout>
</SfDiagramComponent>
@code
{
private void OnDrop(DropEventArgs args)
{
if (args.Element is DiagramSelectionSettings)
{
Node draggingNode = (args.Element as DiagramSelectionSettings).Nodes[0] as Node;
if (draggingNode.InEdges.Count > 0)
{
Connector connector = Diagram.GetObject(draggingNode.InEdges[0]) as Connector;
//Represents the source node id of the connector
connector.SourceID = (args.Target as Node).ID;
}
else
{
args.Cancel = true;
}
_ = Diagram.DoLayoutAsync();
}
}
}
Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ParentChild1892920598.zip
