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

Support for the ConnectionChange Event to validate Connectors

Hi,

I was looking to your documentation, blog and your support forum, but i found no suitable sample on how to validate the connections between nodes. I tried to use the ConnectionChange action but i failed to get it working and it seems to be not available on the latets release anymore.

I have the requirement to provide different kind of nodes where each node type has it's own set of rules which defines which other node type is allowed to connect to.

Sample:

NodeA - allows no inbound connection, but allows to connect to NodeB and Node C
NodeB - allows inbound connections from NodeA and allows to connect to Node D
NodeC - allows inbound connections from NodeA and allow outbound connections to NodeD
NodeD - allows inbound connections from NodeB and NodeC only


Regards
Manuel

5 Replies

NG Naganathan Ganesh Babu Syncfusion Team February 3, 2020 12:17 PM UTC

Hi Manuel, 
 
We have created a sample to achieve your requirement by using Diagram’s ConnectionChange event. Please refer to the below code example and sample. 
 
Code example: 
 
<EjsDiagram @ref="@diagram" Width="80%" Height="1000px" Nodes="NodeCollection" Connectors="ConnectorCollection"> 
    <DiagramEvents OnConnectionChange="@ConnectionChange"></DiagramEvents> 
</EjsDiagram> 
 
private void ConnectionChange(IBlazorConnectionChangeEventArgs args) 
    { 
        if (args != null && args.State == EventState.Changing) 
        { 
            if (args.Connector.SourceID == "nodeB" && args.NewValue.ConnectorTargetValue!=null && args.NewValue.ConnectorTargetValue.NodeId != "nodeA") 
            { 
                //allows inbound connections from NodeA and allows to connect to Node D 
            } 
            else 
            { 
                args.Cancel = true; 
            } 
        } 
    } 
 
Sample link: 
 
 
Regards, 
 
Naganathan K G 



MA Manuel February 3, 2020 02:04 PM UTC

Hi,

thanks for your fast help, it works as expected. Is there any chance to provide a visual feedback
for the user if the connection is not allowed while i'm dragging the connector? 
An icon with a blocking symbol or something like this?

Regards
Manuel


MA Manuel February 3, 2020 02:53 PM UTC

After some tests it seems to be possible to skip this validation process,
still if the cancel property is set to true the connectors are bound to the shapes.
This seems to happen if the target is bound and the source is dragged to an "invalid" shape only.




SG Shyam G Syncfusion Team February 5, 2020 01:04 PM UTC

Hi Manuel,  
  
We have an issue while cancelling the connectionchange for the connector source point. We have logged a defect report for this issue. We will fix this issue and provide the patch on 19th February,2020 weekly patch release.  
  
Now, you can track the status of your issue through below feedback link.  
 
 
We will provide a sample once this issue is resolved. 
 
Regards,  
Shyam G  



AR Aravind Ravi Syncfusion Team February 19, 2020 10:04 AM UTC

Hi Manuel,  
    
We have fixed the reported issue and included it in our patch release (v17.4.50) which is rolled out successfully.   
   
Please upgrade to the latest version packages to resolve this issue.         
  
Regards,  
Aravind Ravi 
 


Loader.
Live Chat Icon For mobile
Up arrow icon