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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Advanced fonctionnality of diagram organizational chart

Thread ID:

Created:

Updated:

Platform:

Replies:

151063 Jan 29,2020 04:59 PM UTC Feb 4,2020 04:48 AM UTC Angular - EJ 2 5
loading
Tags: Diagram
Gaylord Petit
Asked On January 29, 2020 04:59 PM UTC

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 [Syncfusion]
Replied On January 30, 2020 12:43 PM UTC

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. 
 
 
- 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? 
 
 
 
Regards, 
Shyam G 


Gaylord Petit
Replied On January 30, 2020 01:17 PM UTC

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 [Syncfusion]
Replied On February 1, 2020 05:47 AM UTC

 
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. 
 
 
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'; 
      } 
    } 
 
 
 
 
Regards, 
Shyam G 


Gaylord Petit
Replied On February 3, 2020 05:56 PM UTC

Thanks very much that work 


Shyam G [Syncfusion]
Replied On February 4, 2020 04:48 AM UTC

Hi Gaylord, 
Thanks for your update. 
Regards, 
Shyam G 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon