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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Connectors are not displayed propertly

Thread ID:





144766 May 21,2019 02:53 PM UTC May 24,2019 05:00 AM UTC ASP.NET MVC 5
Tags: Diagram
Pedro Martínez
Asked On May 21, 2019 02:53 PM UTC


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.


Ramya Thirugnanam [Syncfusion]
Replied On May 22, 2019 07:23 AM UTC

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. 
Please find the help documentation for layout and manual connection for 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. 
Ramya T 

Pedro Martínez
Replied On May 22, 2019 08:19 AM UTC


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.


Attachment: layoutsample65901607_4299c712.zip

Ramya Thirugnanam [Syncfusion]
Replied On May 23, 2019 07:33 AM UTC

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).  
Please refer to the below online sample in which we have obtained node and connector dataSource to render a layout.  
Ramya T 

Pedro Martínez
Replied On May 23, 2019 12:57 PM UTC


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


Ramya Thirugnanam [Syncfusion]
Replied On May 24, 2019 05:00 AM UTC

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;  
Ramya T  


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