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

[sunita]

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.

[Ramya Thirugnanam]

Hi Sunita,  

 

Thank for contacting Syncfusion support. 

 

We have prepared a sample for your requirements. Please find the sample in below link. 

 

Sample: Organizational-Chart 

 

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. 

 

Link: https://ej2.syncfusion.com/documentation/api/diagram/#drop  

 

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. 

 

Documentation: https://ej2.syncfusion.com/documentation/api/diagram/#connectionchange  

 

Regards, 

Ramya T 

[sunita]

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?

[Ramya Thirugnanam]

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. 

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Organizational_Chart-Symbol_Palette1350569376 

 

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 

[sunita]

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?

[Ramya Thirugnanam]

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 . 

 

Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SCREEN~11007655403 

 

 

Regards, 

Ramya T