Allow connector creation only after Validation

Hello, 

I have different types of ports on my nodes, representing datatypes in my case.
Now I need to take care, that via drag connections are only allowed if source and target port have the same type.
If I try to connect two different types, the connector should be removed. I do not want connectors not connected to ports on both sides.
Is there a way to achieve this?


Best regards,

Alex


3 Replies

AK Arun Kumar Sivakumar Syncfusion Team June 18, 2025 07:06 AM UTC

Hi Alexander,

 

Requirement: Connect ports only if they are of the same type, and remove the connector if the port types are different.

 

We achieved this requirement using the ValidateConnection method and the ConnectorEditing event. In the ValidateConnection method, we checked whether the ports are of the same type or different types. If the ports are different type, we set a Boolean flag to true. Based on this flag, we removed the connector from the diagram’s connector collection when the port types were different.

 

We have attached a sample and a video for your reference.

 

Note: In this sample, we have implemented the logic only for NodePort and ConnectorPort types. You can modify the types as per your requirement.

 

If there has been any misunderstanding regarding your requirement, please revert us with more details that might help us to provide the proper solution

 

Regards,

Arun Kumar S


Attachment: Sample_and_video_fe036ccc.zip


AK Alexander Kuhlmann replied to Arun Kumar Sivakumar June 22, 2025 09:24 AM UTC

Hi Arun, 


thank you for your solution.

I have optimized your way a little bit, so if fits better for my use-case.

I just use this method:

        private void CustomDiagram_ConnectorEditing(object sender, ConnectorEditingEventArgs args)

        {

            if (args.DragState == DragState.Completed)

            {

                if (args.Item is NFConnector connector)

                {

                    if (!connector.IsConnected() || !connector.IsValidConnector())

                    {

                        if (Connectors is ObservableCollection<NFConnector> connectors) connectors.Remove(connector);

                    }

                }

            }

        }

NFConnector is my connector class, and this connectors can tell if they are connectet on both sides and if the connected ports have the same datatype.


Regards,

A



AK Arun Kumar Sivakumar Syncfusion Team June 23, 2025 07:21 AM UTC

Hi Alex,

 

Requirement: Connect ports only if they are of the same type, and remove the connector if the port types are different.

 

We have reviewed your code snippet, and it is working correctly. As expected, the connectors are being removed from the connector collection.

 

However, we are not clear about the purpose of the two methods: the connector.IsConnected() and connector.IsValidConnector(). If these methods are used correctly, the connectors will be removed properly when trying to connect different types of ports.

 

Regards,

Arun Kumar S


Loader.
Up arrow icon