Category / Section
How to change the parent child relationship in layout at runtime?
1 min read
In a Blazor Diagram, drag and drop the node onto another node using the drop event, which establishes the parent-child relationship. Also, enable the AllowDrop constraints, which show the highlighter when you drag the node and mouse hover over another node.
Refer to the following code example to establish the parent-child relationship for the 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.DoLayout();
}
}
}
Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ParentChild1892920598.zip
