ComplexHierarchicalTree floating elements

[Brandon]

Hi, I have a problem when I build my ComplexHierarchicalTree with some nodes since some appear floating. 

The problem is that I have to linked them to another nodes in order to avoid these problem but in some user cases it the nodes should't be connected they just must be displayed in the screen. 

I attached the image of the problem: https://drive.google.com/file/d/1guDEUPFGVMeI-5bLCGIHIlXrngG3aWcG/view?usp=sharing 

Thank you! 

[Aravind Ravi]

Hi Brandon, 

We suspect that the parent ID for that node is not set properly. So that node does not gets added as a child to the parent node, it gets added as a parent node with no child in it.  So set proper parent ID to the child node. After add new node call diagram doLayout method. So that layout gets rearranges and newly added node add as a child to that parent node. 

In case if the issue still persists, please share more details about your issue i.e. how do you add new node in the layout and how do you set parent ID in the diagram or simple sample illustrating issue which would help us to proceed further.  

Regards 

Aravind Ravi 

[Brandon]

Hi, 
For example, these two elements are not connected to anything and should NOT be connected, however I want them to appear on screen without one on top of the other.
https://drive.google.com/file/d/1HjmcgzZAVaumCmN6bqlKH92q1Cl44fOv/view?usp=sharing

[Aravind Ravi]

Hi Brandon,  

 

By default, In the diagram when you add nodes without offset x and offset y it takes default offset position as 0, 0. So that when you add nodes through button click all the nodes gets added at same position. So, Multiple nodes will be added at same position. This is the default behavior of the multi parent layout. If it has child only means then then it gets added in proper position else it gets added as top left corner of the diagram and node does not position below each other. To avoid overlapping we need to set offset to the nodes so that it does not gets overlap with each other. We have created a simple sample to show how to bind offset values in data binding. In the JSON data add extra two fields for the offsetX and offsetY. When bind the JSON data in the do binding bind the offsetX and offsetY data values to node offsetX and offsetY. Please find the below code snippet for how to bind the offset values in do-binding.  

  

  {  

            "Name": "node11",  

            "fillColor": "#e7704c",  

            "border": "#c15433",  

            "offsetX": 200,  

            "offsetY": 200  

        },  

        {  

           "Name": "node12",  

            "fillColor": "green",  

            "border": "#c15433",  

            "offsetX": 350,  

            "offsetY": 200  

        },  

  

public data: Object = {  

        id: 'Name', parentId: 'ReportingPerson',  

        dataSource: new DataManager(this.Data),  

        //binds the external data with node  

        doBinding: (nodeModel: NodeModel, data: DataInfo, diagram: Diagram) => {  

            /* tslint:disable:no-string-literal */  

            nodeModel.style = { fill: data['fillColor'], strokeWidth: 1, strokeColor: data['border'] };  

            nodeModel.offsetX = Number(data['offsetX']);  

            nodeModel.offsetY = Number(data['offsetY']);  

  

        }  

    };  

  

We have attached a sample for your reference. Please find the sample in below link  

  

Sample: https://stackblitz.com/edit/angular-c6dmfq-yrpmhk 

 

Regards 

Aravind Ravi