SF Diagram - Port to port connection restrictions.

Hi Team,
Is there a way to restrict port to port connections in SfDiagram.
For example, If would like to allow only red to red and green to green port connections. Is there a way to achive this using SfDiagram ?

Thanks,
Sri.

3 Replies

KR Karkuvel Rajan Shanmugavel Syncfusion Team May 3, 2018 10:59 AM UTC

Hi Srikanth, 
 
We have a virtual method ‘ValidateConnection’ to override the connection behaviour. This method contains the source and target information in its arguments. You change the source and target as you wish, in your case please set target port to null if it an invalid connection. 
 
We have provided you code example , sample and documentation link to know more about them. Please follow the code example , sample link and Documentation link below. 
 
Code Example: 
 
//Method to Validate whether create connection or Not 
 
        protected override void ValidateConnection(ConnectionParameter args) 
        { 
            //Necessary Conditions before create or nullify the connection 
 
            if ((args.Connector as ConnectorViewModel).SourcePort != null && (args.Connector as ConnectorViewModel).TargetPort != null) 
            { 
                if (((args.Connector as ConnectorViewModel).SourcePort as Customport).Color != ((args.Connector as ConnectorViewModel).TargetPort as Customport).Color) 
                { 
                    args.TargetPort = null; 
                } 
            } 
        } 
 
  
 
Regards, 
Karkuvel Rajan.S 



SR Srikanth May 3, 2018 05:58 PM UTC

Hi Rajan,

Thanks for your response. Let me make the requirement more clear. 


Above Redport, Greenport are inherited from 'NodePortViewModel'. The requirement is to allow connection only between similar color ports (in this case, red to red and green to green). When someone try to make connection between different ports (for example red to green), it should not allow or show the below connection preview.



Appreciate your support.

Thanks,
Sri.




KR Karkuvel Rajan Shanmugavel Syncfusion Team May 4, 2018 12:50 PM UTC

Hi Srikanth, 

We have analysed your requirement. We have modified the code in the validate connection method in the sample provided on the last response. Please refer modified code example and sample link below. 

Code Example: 

        //Method to Validate whether to Create connection or Not 
        protected override void ValidateConnection(ConnectionParameter args) 
        { 
            var con = args.Connector as ConnectorViewModel; 
            if (args.TargetPort != null) 
            { 
                //For getting source and target port 
                var target = args.TargetPort as Customport; 
                var source = con.SourcePort as Customport; 
 
                //To validate sourceport color and targetport color 
                if (target.Color != source.Color) 
                { 
                    //Set targetport and targetnode as null 
                    args.TargetPort = null; 
                    args.TargetNode = null; 
                } 
            } 
        } 
 
        //Here args provided the necessary information of TargetPort,SourceNode,TargetNode based on the connection creation. 



Regards, 
Karkuvel Rajan.S 


Loader.
Up arrow icon