how to add node as child to existing node at runtime

[Tobias Koller]

I need to add nodes as child-nodes to an existing node at runtime.

I've found your examples of grouping but there you always create a new goup at runtime an not using an node as "group-parent".

Or: maybe you can tell me another way of just grouping nodes together so that they are always inside a frame of any kind (I only need a background for the "grouped" nodes that I know they are related...maybe there is another way? 

[Sivakumar Sekar]

Hi Tobias,

We have added the sample link and a video link to demonstrate how to group the node and its children and to apply background color to the grouped node. We can able to group the selected nodes and their children by using the nodes outEdges property to find whether the node has children or not. Using the node outEdges, we can able to group the children together and can able to apply styles directly to the group node. please refer to the below code snippet and sample.

selectionChange={(args) => {

if(args.state === "Changed" && diagramInstance.selectedItems.nodes.length === 1 && diagramInstance.selectedItems.connectors.length ===0 && args.newValue[0].outEdges.length > 0)

{

let children = [];

for(let i = 0; i< args.newValue[0].outEdges.length;i++)

{

let connector = diagramInstance.getObject(args.newValue[0].outEdges[i]);

children.push(connector.targetID);

}

children.push(args.newValue[0].id);

let groupNode = {

children: children,

style: {

fill: 'red',

strokeWidth: 2

},

}

diagramInstance.add(groupNode);

}

}}

Sample Link: https://stackblitz.com/edit/react-g57zqv

Video Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/F1703751594102468

If we misunderstood your requirement, please share with us more details i.e. screenshot of your requirement or any video demonstration of your requirement. This will be helpful for us to proceed further.

Regards,

Sivakumar