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

Support for the ConnectionChange Event to validate Connectors

Thread ID:





151162 Feb 2,2020 12:12 PM UTC Feb 19,2020 10:04 AM UTC Blazor 5
Tags: Diagram
Asked On February 2, 2020 12:12 PM UTC


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.


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


Naganathan Ganesh Babu [Syncfusion]
Replied On 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> 
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 
                args.Cancel = true; 
Sample link: 
Naganathan K G 

Replied On February 3, 2020 02:04 PM UTC


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?


Replied On 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.

Shyam G [Syncfusion]
Replied On 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. 
Shyam G  

Aravind Ravi [Syncfusion]
Replied On 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.         
Aravind Ravi 


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