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

Restrict drawing of disconnected connectors

Thread ID:





149060 Nov 13,2019 02:30 AM UTC Nov 28,2019 08:31 AM UTC React - EJ 2 4
Tags: Diagram
Asked On November 13, 2019 02:30 AM UTC


is there a way to disallow disconnected connectors in a diagram? I was looking at the connectionChange event but that does not fire on initial connection of two nodes, only when an existing connector is dragged out / changed.

I need to be able to restrict users from drawing disconnected connectors during runtime. A user adds two nodes on the canvas, then can draw a connector ONLY by hovering over a node and dragging out a connector to target node. Any other drawing of connectors should not be allowed. In other words, a user should be only able to connect nodes, not freely draw any connector anywhere.

Thank you for you help.

Shyam G [Syncfusion]
Replied On November 15, 2019 05:49 AM UTC

Hi Martin, 
We can use collectionChange event to remove the connectors on certain situation by cancelling the event. We have an issue in it and logged “Unable to remove connectors that are drawn at runtime in the collectionChange” a defect report. The fix for this issue is estimated to be available on 3rd December, 2019. 
You can track the status of the issue from the below feedback link. 
Shyam G 

Shyam G [Syncfusion]
Replied On November 27, 2019 06:09 AM UTC

Hi Martin,  
Reported Issue : Unable to remove connectors that are drawn at runtime in the collectionChange. 
We are glad to announce that our patch release (v17.3.29) is rolled out successfully and In that release, we have added the fix for reported issue.      
Please upgrade to the latest version packages to resolve this issue.       
We have created a sample in which we have allowed port to port connections alone at runtime. Please refer to a code example and sample below. 
Code example: 
collectionChange = {(args)=> {  
          if(args.element && args.element.segments && !(args.element.sourcePortID && args.element.targetPortID)) {  
Shyam G  

Replied On November 28, 2019 07:07 AM UTC

Thank you, that works. I am yet to add ports but with a slight change (.sourceID & .targetID instead of .sourcePortID/.sourceTargetID) it works well.  

Shyam G [Syncfusion]
Replied On November 28, 2019 08:31 AM UTC

Hi Martin, 
Thanks for your update. 
Shyam G 


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