1. Home
  2. Forum
  3. Angular - EJ 2
  4. ComplexHierarchicalTree with stack groups as nodes

ComplexHierarchicalTree with stack groups as nodes


I am trying to implement stack groups as nodes in Angular but the documentation example I cannot adapt it to my project. In the same way I would like to know if it is possible to have connectors of different colors in the same diagram using the "connector.style.strokeColor". 


9 Replies
AR Aravind Ravi Syncfusion Team May 7, 2020 07:03 AM UTC

Hi Brandon, 
 
We have created a sample to show a complex hierarchical tree with a stack panel by using the node template. By using SetNodeTemplate we can design the specific template for the node. For every node render these SetNodeTemplate method calls in that we can define the specific template. We can set the different stroke color to the connector by using connector defaults. In the sample JSON data add extra field for the connector stroke color. In the connector, defaults get the connected node by using the getObject method. So after getting the node now set the connector stroke color by using node data. Please find the below code snippet for how to set connector stroke color using node data. 
 
public connDefaults(connector: ConnectorModel, diagram: Diagram): void { 
    connector.type = "Orthogonal"; 
    connector.cornerRadius = 7; 
    connector.targetDecorator.height = 7; 
    connector.targetDecorator.width = 7; 
    let node: NodeModel = diagram.getObject(connector.targetID); 
    connector.style.strokeColor = node.data["border"]; 
  } 
 
We have attached a sample for your reference. Please find the sample in below link 
 
 
Screen shot:  
 
 
 
Regards 
Aravind Ravi 


BR Brandon May 8, 2020 09:30 PM UTC

Thanks a lot Aravind! 

AR Aravind Ravi Syncfusion Team May 11, 2020 05:42 AM UTC

Hi Brandon, 

Thanks for the update 

Regards 
Aravind Ravi 


BR Brandon May 12, 2020 06:00 PM UTC

Hi Aravind, im trying to add more childs in my parent node. 

Taking into account the example you sent me i want to add more "Designation" 

And, the arrow can come from a child node of the father and also of the father?

AR Aravind Ravi Syncfusion Team May 13, 2020 04:52 AM UTC

Hi Brandon, 
 
We have modified a sample to add source decorator for the node. By default, In the diagram source decorator shape is set as ‘None’. So that source decorator does not display in diagram. In the connector defaults set source decorator shape as ‘Arrow’ and height, width for the source decorator. Now the arrow does added for the parent node. Please find the below code snippet for how to set source decorator for connector. 
 
public connDefaults(connector: ConnectorModel, diagram: Diagram): void { 
    connector.type = "Orthogonal"; 
    connector.cornerRadius = 7; 
    connector.sourceDecorator = { shape: 'Arrow', height: 7, width: 7}; 
    connector.targetDecorator.height = 7; 
    connector.targetDecorator.width = 7; 
    let node: NodeModel = diagram.getObject(connector.targetID); 
    connector.style.strokeColor = node.data["border"]; 
  } 
 
 
For more information about decorator properties please refer to below UG documentation link 
 
 
Regards 
Aravind Ravi 


BR Brandon May 13, 2020 05:16 AM UTC

Thanks for the prompt response. My question is more focused on the possibility of adding more than one "desigText.content" and an arrow coming out of that content to a node.
Attached image of a design I made to make the idea clearer


AR Aravind Ravi Syncfusion Team May 14, 2020 06:33 AM UTC

Hi Brandon, 

We can able to add more than one text content to the node. By using text element we can able to add text for the node. After add the multiple text elements push the text elements to stack panel children. Please find the below code snippet for how to add text element 

let desigText: TextElement = new TextElement(); 
    desigText.margin = { left: 0, right: 0, top: 5, bottom: 0 }; 
    desigText.content = "Designation"; 
    desigText.style.color = "black"; 
    desigText.style.strokeColor = "none"; 
    desigText.style.fontSize = 12; 
    desigText.style.fill = "none"; 
    desigText.horizontalAlignment = "Left"; 
    desigText.style.textWrapping = "Wrap"; 
    desigText.id = obj.id + "_desig"; 

let desigText2: TextElement = new TextElement(); 
    desigText2.margin = { left: 0, right: 0, top: 5, bottom: 0 }; 
    desigText2.content = "Text 1"; 
    desigText2.style.color = "black"; 
    desigText2.style.strokeColor = "none"; 
    desigText2.style.fontSize = 12; 
    desigText2.style.fill = "none"; 
    desigText2.horizontalAlignment = "Left"; 
    desigText2.style.textWrapping = "Wrap"; 
    desigText2.id = obj.id + "_desig2"; 

    let desigText3: TextElement = new TextElement(); 
    desigText3.margin = { left: 0, right: 0, top: 5, bottom: 0 }; 
    desigText3.content = "Text 2"; 
    desigText3.style.color = "black"; 
    desigText3.style.strokeColor = "none"; 
    desigText3.style.fontSize = 12; 
    desigText3.style.fill = "none"; 
    desigText3.horizontalAlignment = "Left"; 
    desigText3.style.textWrapping = "Wrap"; 
    desigText3.id = obj.id + "_desig3"; 

    innerStack.children = [text, division, desigText, desigText2, desigText3]; 


 

We does not have support to show connectors as shown in the image. Because in the layout connectors are get automatically arranged, we cannot able to position them.  

Regards 
Aravind Ravi 


BR Brandon May 20, 2020 04:54 PM UTC

Thank you! 
One last question, how can i change de fill of the nodes? Becasue fill: data["fillColor"] seems to not work. 


AR Aravind Ravi Syncfusion Team May 21, 2020 05:09 AM UTC

Hi Brandon, 

We have modified a sample to apply fill color for nodes. In this sample we have used stack element as template for nodes. When we set fill color for node it applied for node only not for the stack element. So please set fill color for the stack element. So that fill color applied for the stack element and node is displayed as shown in below image 

 

Please find the below code snippet for how to set fill color for the stack element 

let content: StackPanel = new StackPanel(); 
    content.id = obj.id + "_outerstack"; 
    content.orientation = "Horizontal"; 
    content.style.strokeColor = "gray"; 
    content.style.fill = (obj.data as DataInfo).fillColor; 
    content.padding = { left: 5, right: 10, top: 5, bottom: 5 }; 

    let innerStack: StackPanel = new StackPanel(); 
    innerStack.style.strokeColor = "none"; 
    innerStack.style.fill = (obj.data as DataInfo).fillColor; 
    innerStack.margin = { left: 5, right: 0, top: 0, bottom: 0 }; 
    innerStack.id = obj.id + "_innerstack"; 


Regards 
Aravind Ravi 


Loader.
Up arrow icon