Support for the ConnectionChange Event to validate Connectors

[Manuel]

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

[Naganathan Ganesh Babu]

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: 

 

https://www.syncfusion.com/downloads/support/directtrac/151162/ze/DiagramBlazor-577108094  

 

Regards, 

 

Naganathan K G 

[Manuel]

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

[Manuel]

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]

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 19^th February,2020 weekly patch release.  

  

Now, you can track the status of your issue through below feedback link.  

 

Feedback Link:   https://www.syncfusion.com/feedback/11821/exception-raised-while-cancelling-the-connectors-source-change-event 

 

We will provide a sample once this issue is resolved. 

 

Regards,  

Shyam G  

[Aravind Ravi]

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.         

https://www.npmjs.com/package/@syncfusion/ej2-diagrams      

  

Regards,  

Aravind Ravi