Connectors are not displayed propertly

Pedro Martínez

Asked On May 21, 2019 02:53 PM UTC

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!

Reply | Reply with quote

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.

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

Reply | Reply with quote

Pedro Martínez

Replied On May 22, 2019 08:19 AM UTC

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

Reply | Reply with quote

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).

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

Reply | Reply with quote

Pedro Martínez

Replied On May 23, 2019 12:57 PM UTC

Hello,

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

Thanks!

Reply | Reply with quote

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;

Regards,

Ramya T

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
144766	May 21,2019 02:53 PM UTC	May 24,2019 05:00 AM UTC	ASP.NET MVC	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US