How to fetch parent node details in diagram using syncfusion?

Question

I'm working with diagram features at the moment. We need to put shapes inside other shapes to meet our requirements. So, when we drag and drop a shape into another shape, we need to access the parent shape node's data. I spent a few hours working on this, but I was unable to find a satisfactory answer. Could you please assist me in resolving this issue?

When I drop the object on the diagram, I use "nodeondrop & nodecollectionchanged." While changing the size of the Rectangle, use "nodeSizeChanging." When an action is triggered, the super node or child node details are not displayed.

So how to get details of parent and child shape while trigger any event?

Rectangle Shapes

score 0 · Accepted Answer · answered Nov 29 '21 at 13:22

We have added the sample link and a video link to demonstrate how to get the dropped node target element. We can able to get the target node using the drop event (Which will be triggered when a node is dropped over the other node). The drop event will only trigger when NodeConstraints AllowDrop is enabled. In the drop event, we can able to get the target node, we can store the target node ID into the source node addinfo property(addinfo property is used to store custom information of node) if needed. Please refer to the below code snippet and sample for more information.

function getNodeDefaults(obj, diagram) {
            obj.style = { fill: '#357BD2', strokeColor: 'white' };
            //Set ports
            obj.ports = getPorts(obj);
            obj.constraints = ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.AllowDrop;
            return obj;
        }

function drop(args) {
            var diagram = document.getElementById("diagram").ej2_instances[0];
            diagram.selectedItems.nodes[0].addInfo = args.target.id;
            var res = args.target.id;
            if (args.target.addInfo) {
                res += "& Grand Parent ID is " + args.target.addInfo;
            }
            alert("Parent ID is " + res);
        }

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Drag-Drop-1203171661

Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/forums1707332094721080

How to fetch parent node details in diagram using syncfusion?

1 Answers1