Advanced fonctionnality of diagram organizational chart

[Gaylord Petit]

Hello,

We have a big problem because we do not know at all how to reproduce our functionality with your "diagram" component when we have gone through all the documentation.

This is exactly what we have already done on angular but which does not fully respond and that is why we have moved to your solution which will be more stable:

Functionality :

- be able to deploy and reduce nodes

- be able to easily create a new child to an element

- be able to select an element and all parents are also colored

- be able to persist the selection of the desired element

We really need your help ...

Attachment: orga_chart_bbcaf4e9.zip

[Shyam G]

Hi Gaylord, 

 

Query	Response
- be able to deploy and reduce nodes  - be able to easily create a new child to an element	We have created a sample to meet all your requirements. Please let us know if any concerns.     Sample: https://stackblitz.com/edit/angular-wsvsvc-8zgqx2?file=app.component.ts
- be able to select an element and all parents are also colored  - be able to persist the selection of the desired element	Could you please share us more details such as exact scenario/ use case to color the node?

 

 

Help documentation for layout: https://ej2.syncfusion.com/angular/documentation/diagram/automatic-layout/?no-cache=1#organizational-chart 

 

Regards, 

Shyam G 

[Gaylord Petit]

Thank you for your reply.

Unfortunately it is not really what you want for the addition of an element.

Here are the steps you want:

When hovering over an element, a "+" button appears. When the user clicks on this button then a modal appears and allows the user to choose a name, a role and other information on this element.

When the user validates, the group appears correctly placed on the diagram with the link with its parent and the name that we had entered in the modal.

I hope to have been clear :/

For the part of selection of an element and its parents that you did not understand here is the procedure.

In another page of our application (once the company has created its organizational chart with the addition of elements, etc.) the user will be able to select groups and therefore the user must be able to select an element and that all his parents are colored too (as shown in the video I attached to you the first time)

Is it clearer or not?

And so the last point is that we must be able to send the data (the new element created or the element selected for the second function)

Thanks for all

[Shyam G]

 

Hi Gaylord, 

 

Query	Response
When hovering over an element, a "+" button appears. When the user clicks on this button then a modal appears and allows the user to choose a name, a role and other information on this element.  When the user validates, the group appears correctly placed on the diagram with the link with its parent and the name that we had entered in the modal.  I hope to have been clear :/	Please use our userHandle option which appears while selecting the node instead of + button while hovering on the element.    In the below sample, when you click a element, the userHandle option of add, edit and delete option appears. We can add a new node, edit a node and delete the node using that option in the layout.    Please refer to a help documentation and the sample below.    Help documentation: https://ej2.syncfusion.com/angular/documentation/diagram/interaction/?no-cache=1#user-handles
In another page of our application (once the company has created its organizational chart with the addition of elements, etc.) the user will be able to select groups and therefore the user must be able to select an element and that all his parents are colored too (as shown in the video I attached to you the first time)  Is it clearer or not?	When you select a node and clicking on the updateColor button, the parent node color of the selected element gets changed to blue. Similarly, you can update all the parents using your own logic. Please refer to a code example and the sample below.    Code example:      public updateColor() {        let node: any = this.diagram.selectedItems.nodes[0];        if(node) {           //get connector based on inedges of a node          let connector:any = this.diagram.getObject(node.inEdges[0]);          let sourceNode: any = this.diagram.getObject(connector.sourceID);          //update parent node color          sourceNode.style.fill = 'blue';        }      }

 

 

Sample: https://stackblitz.com/edit/angular-fp7qci-emtv35?file=app.component.ts 

 

Regards, 

Shyam G 

[Gaylord Petit]

Thanks very much that work 

[Shyam G]

Hi Gaylord, 

Thanks for your update. 

Regards, 

Shyam G