We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Diagram in readonly mode and Drag drop 'group' to add child nodes.

Hello

I have two below queries , I am using ejs-diagram in one of our application where user can create an organizational chart. I am able to create a org chart by dragging and dropping rectangle from symbol palette to diagram along with the connectors. Now I want to group the nodes - there could be multiple groups with multiple nodes in a diagram. I can drag a 'Group' shape from palette and drop it on diagram - but not able to place child nodes in it. If you could please provide me sample showing dragging a Group shape from palette and dropping it on diagram and then either I should be able to drag existing nodes to the group or drag new nodes from palette to the group. Also add an name (annotation) to the group.  

Also I am not able to show the diagram in readonly mode (user should be able to move any node).

Help appreciated.

Thanks.

5 Replies

RT Ramya Thirugnanam Syncfusion Team March 11, 2019 09:07 AM UTC

Hi Sunita,  
 
Thank for contacting Syncfusion support. 
 
We have prepared a sample for your requirements. Please find the sample in below link. 
 
 
The drop event gets triggered, when you drag and drop the node from symbol palette to diagram. In this event, We can check whether target element is group or not. If it is group node, we can add the dropped node as a child to the group node. Please find below code example for how to make a node to child of group node at run time. 
 
public drop(args: IDropEventArgs): void { 
    if (args.element && (args.target as NodeModel).children) { 
      this.diagram.addChild((args.target as NodeModel), (args.element as NodeModel)); 
      this.diagram.dataBind(); 
    } 
  } 
 
For more information about drop event, please find below help documentation link. 
 
 
The connectionChange event gets fired, while making the connection between two nodes at run time. In that event, we can check if the connector has source node and target node. Please call the doLayout method in diagram to arrange the nodes based on connections. Please find below code example for how to call doLayout method in connection change event. 
 
public connectionChange(args): void { 
    if (args.state === 'Changed' && args.connector.sourceID && args.connector.targetID) { 
      this.diagram.doLayout(); 
    } 
  } 
 
For more information about connectionchange event, please find below help documentation link. 
 
 
Regards, 
Ramya T 



SU sunita March 11, 2019 11:39 AM UTC

Hello Ramya,

For me  (args.target as NodeModel).children) this is null. And also drop event is fired when dropping element from symbol palette. Its not getting fired when dropping existing nodes on the group shape. How do I add existing nodes on a diagram to the group shape?


RT Ramya Thirugnanam Syncfusion Team March 12, 2019 12:07 PM UTC

Hi Sunita,   
 
Regarding “Read only diagram”, We have updated the sample to achieve this requirement. We can achieve this by using constraints of the node. Please find the updated sample from the following link. 
 
 
Regarding “ add existing nodes on a diagram to the group shape”,  Drop the dragged node(existing in diagram) to group when the group get highlighted with red color border. 
 
Regards, 
Ramya T 



SU sunita March 12, 2019 12:13 PM UTC

Hi,

I was able to do the readonly diagram yesterday. I am struggling with dropping a node on group.

"Regarding “ add existing nodes on a diagram to the group shape”,  Drop the dragged node(existing in diagram) to group when the group get highlighted with red color border. "

When dropping existing node on group- red border is appearing to the node and not to the group. And drop event is also not getting fired. Can you provide me sample for the same?


RT Ramya Thirugnanam Syncfusion Team March 13, 2019 06:09 AM UTC

Hi Sunita, 
 
 
Regarding add existing nodes on a diagram to the group requirement, this support is already included in the previously shared sample. Please refer to the video from the sample to represent how to add node to group . 
 
 
 
Regards, 
Ramya T 


Loader.
Live Chat Icon For mobile
Up arrow icon