Connectors are not displayed propertly

[Pedro Martínez]

   Hello,

I have a diagram control bind to JSON data with this configuration:

MultipleParent.DiagramModel.PageSettings.ScrollLimit = Syncfusion.JavaScript.DataVisualization.DiagramEnums.ScrollLimit.Diagram;

MultipleParent.DiagramModel.Layout.Type = Syncfusion.JavaScript.DataVisualization.DiagramEnums.LayoutTypes.None;

MultipleParent.DiagramModel.Layout.Orientation = Syncfusion.JavaScript.DataVisualization.DiagramEnums.LayoutOrientations.LeftToRight;

In the diagram, the connector are not displayed properly. The nodes are displayed perfectly in the configurated position, but you have to move a node to watch the connectors.

Thanks!

[Ramya Thirugnanam]

Hi Pedro,  

 

Could you please confirm us whether your requirement is to create a layout or diagram with manual positioning or automatic layout?  From the given code example, The LayoutType is set as None, so an diagram nodes and connectors are rendered at 0,0 position. We have created a sample to represent the hierarchical layout creation. Please find the sample as below. 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/layoutsample65901607  

 

Please find the help documentation for layout and manual connection for nodes. 

 

Link: https://help.syncfusion.com/aspnetmvc/diagram/automatic-layout 

 

Link: https://help.syncfusion.com/aspnetmvc/diagram/connector#connect-nodes 

 

 

Could you please provide the screenshot of diagram and json data if the provided sample does not help to achieve your requirement?  This will help us to guide you with appropriate solution at the earliest. 

 

Regards,  

Ramya T 

[Pedro Martínez]

Hello,

I want to create the diagram with manual position of the nodes. The position is set in the datasource with offsetX and offsetY properties. But, it's imposible to set the position of the connectors this way. Is there a way to set the position of the connectors automatically?

I have modified the sample to reproduce the issue.

Thanks.

Attachment: layoutsample65901607_4299c712.zip

[Ramya Thirugnanam]

Hi Pedro,  

 

The ConnectionDataSourceSettings will generate connectors when automatic layout is used.  With respect to your scenario  “layout type as None”,  We need to generate the connector manually.  We have modified your sample to create a connector based on the node dataSource(orgChart.json).  

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/simplesample-249470952  

 

Please refer to the below online sample in which we have obtained node and connector dataSource to render a layout.  

 

Online link: https://mvc.syncfusion.com/demos/web/diagram/editing  

 

Regards,  

Ramya T 

[Pedro Martínez]

Hello,

It works perfectly. But, how to avoid overlapping with the nodes and connectors?

Thanks!

[Ramya Thirugnanam]

Hi Pedro,  

  

Please set Routing constraints in diagram and connector constraints to avoid overlapping of connectors. Please refer to an code example as below.  

  

Code example:   

DiagramProperties model = new DiagramProperties();  

//set routing constraints in diagram model  

model.Constraints = DiagramConstraints.Default | DiagramConstraints.Routing;  

  

  Connector connector = new Connector();  

  //set routing constraints in connector  

  connector.Constraints = ConnectorConstraints.Default | ConnectorConstraints.Routing;  

 

Regards,  

Ramya T