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

Restrict drawing of disconnected connectors

Hello, 

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

4 Replies

SG Shyam G Syncfusion Team November 14, 2019 09:49 PM

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. 
 
 
 
Regards, 
Shyam G 



SG Shyam G Syncfusion Team November 26, 2019 10:09 PM

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)) {  
            args.cancel=true; 
          } 
        }} 
         
 
 
Regards,  
Shyam G  



MA Martin November 27, 2019 11:07 PM

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


SG Shyam G Syncfusion Team November 28, 2019 12:31 AM

Hi Martin, 
Thanks for your update. 
Regards, 
Shyam G 


Loader.
Live Chat Icon For mobile
Up arrow icon