1. Home
  2. Forum
  3. Blazor
  4. validate port connections

validate port connections

Hello,

I have been developing a project of Power electronics using Blazor app. In my project, i have developed one symbol palette which contains all the electrical symbols like resistor, capaictor, diode, etc & one diagram canvas so that user can drag & drop electrical symbols on the same. I want user to draw a valid circuit with validate connections to correct port, so i got stuck in the coding part. Need urgent help, hope you will help me 

Thanks 
Rahuk Kumar

Attachment: AA_48341ad6.zip

15 Replies 1 reply marked as answer
AR Aravind Ravi Syncfusion Team November 24, 2020 01:43 PM UTC

Hi Rahul, 
 
By using the node constraints, port constraints and diagram events we can able to set port hierarchy. If we does not want to connect in any node or port means then remove the InConnect and OutConnect from port constraints and node constraints. So that when you drag a connector to the node or port means then it does not gets connected.  Please refer to the below code snippet 
 
// Node constraints 
       new DiagramNode() 
        { 
            Constraints = NodeConstraints.Default &~( NodeConstraints.InConnect | NodeConstraints.OutConnect), 
        }, 
 
// Port constraints 
Ports= new ObservableCollection<DiagramPort>() 
            { 
                new DiagramPort(){ Id="port1", Offset= new NodePortOffset(){ X=1, Y=0.5},Constraints = PortConstraints.Default& ~(PortConstraints.InConnect | PortConstraints.OutConnect), Visibility = PortVisibility.Visible} 
            } 
 
 
For more information about port and node constraints please refer to below UG documentation link 
 
 
 
Regards 
Aravind Ravi 


Marked as answer
RK Rahul Kumar November 25, 2020 05:12 AM UTC

Hello
Thanks for the solution!
I want to ask another query, how to show alert messages of right or wrong connections on the check button. After make sure that all the ports are connected to each other correctly, then it will pop-up alert message, if true alert right connections else wrong connections.

Thanks 
Rahul kumar

AR Aravind Ravi Syncfusion Team November 26, 2020 04:22 PM UTC

Hi Rahul, 
 
When we select the connector, through diagram selectedItems we can get the selected connector. After get the connector from selectedItems through connector SourcePortID and TargetPortID property we can check in which port connector gets connected. So if it is connected to correct port means then you can show message as Correct Connection. Please refer to below code snippet 
 
public void Check() 
    { 
        DiagramConnector connector = Diagram.SelectedItems.Connectors[0]; 
        if(connector.SourcePortID == "left1" && connector.TargetPortID == "port1") 
        { 
//Show Alert box 
            Console.WriteLine("Correct Connection"); 
        } else 
        { 
            Console.WriteLine("Wrong Connection"); 
        } 
    } 
 
We have prepared a KB to show how to show alert box in blazor. So by using this KB you can show a alert box in your sample 
 
 
Regards 
Aravind Ravi 


RK Rahul Kumar November 27, 2020 02:43 AM UTC

Hello sir,
Thank you so much for the help
Can you please elaborate the above scenario of connectors with the help of diagram with code. It will be very helpful.

Thanks 
Rahul Kumar

AR Aravind Ravi Syncfusion Team November 27, 2020 10:01 AM UTC

Hi Rahul, 
 
We have created a sample to connect the nodes using the ports. On click the check button, we have checked the connector connection i.e. if the connector is connected to correct port or not. We have attached a full diagram sample for your reference. Please find the sample in below link 
 
 
Regards 
Aravind Ravi 


RK Rahul Kumar November 28, 2020 04:26 AM UTC

Hello sir,

I have run your code, but after clicking on the check-connection button it shows error "System.ArgumentOutOfRangeException: 'Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')' ". 

Thanks
Rahul kumar


AK Anisha Kapoor November 28, 2020 04:48 AM UTC

Thanks for sharing this information with us. This was very useful. (https://nicciskincare.com/products/growth-and-strength-nail-serum-oil)

RK Rahul Kumar November 29, 2020 09:36 AM UTC

Hello sir
Please rectify my query. Hope to hear soon from you.

Thanks
Rahul Kumar

AR Aravind Ravi Syncfusion Team November 30, 2020 07:28 AM UTC

Hi Rahul, 

We suspect that the issue occurs due to you have not selected the connector in the sample and click the Check-Connection button. So that reported exception occurs. So in the sample,  when you click on any connector , connector gets selected, after select the connector in the diagram and click the Check-Connection button. So that in the Check function we get the connector from the diagram selected items and check it has the correct or wrong connection.  

 

We have attached a video demonstration of how check function gets works. Please find the video in below link 


Regards 
Aravind Ravi 


RK Rahul Kumar December 1, 2020 05:59 AM UTC

Hello sir

After clicking on the check-connection button, alert box is not visible. What if user doesn't wish to select either connector? User wish to check after making all the connections without selecting any connector. Please provide a code with suitable example. hope to hear soon from you.

Thanks 
Rahul

AR Aravind Ravi Syncfusion Team December 1, 2020 12:23 PM UTC

Hi Rahul, 
 
We have created a sample to check connection for all the connectors in the diagram. By using the diagram’s Connectors property we can able to get the connectors collection rendered in the diagram. In the loop iterate all the connectors in the diagram and through connector’s SourcePortID and TargetPortID check if the connector is connected to proper port or not. Please refer to below code snippet and sample 
 
public void Check() 
    { 
//Iterate all the diagram connectors 
        for (int i = 0; i < Diagram.Connectors.Count; i++) 
        { 
            DiagramConnector connector = Diagram.Connectors[i]; 
            if (connector.SourcePortID == "left1" && connector.TargetPortID == "port1") 
            { 
                Console.WriteLine("Correct Connection"); 
            } 
            else 
            { 
                Console.WriteLine("Wrong Connection"); 
            } 
        } 
    } 
 
 
Regards 
Aravind Ravi 


RK Rahul Kumar December 2, 2020 07:06 AM UTC

Hello sir

Really appreciating your help, thanks. But it is again showing Exception error"System.ArgumentOutOfRangeException: 'Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')' ". 
Also how can i show messages (Correct or wrong connections) with reference to the above scenario using Dialog component feature of Blazor. 
If it is possible, please can we fix a virtual e-meeting, it will not take much time.

Thanks
Rahul Kumar

AR Aravind Ravi Syncfusion Team December 3, 2020 11:02 AM UTC

Hi Rahul, 

We are unable to reproduce the reported issue at our end. When we press the check-button, in the check function, iterate all connectors in the diagram and check if the connector has correct connection or not. We have attached a video demonstration of how check function gets work. Please find the video in below link 


By using the Syncfusion dialog component , we can able to show the popup in the diagram. In online samples on click the alert button we have showed the alert dialog box. So please refer the below sample to show the dialog in the diagram. Please refer to below sample  


For more information about how to use dialog component, please refer to below UG documentation link 


Regards 
Aravind Ravi 


RK Rahul Kumar December 4, 2020 05:57 AM UTC

Hello
I am sharing my code with you, please go through the code, refer to index.razor page code & make changes according to the need. Need your urgent help because I have to submit this project in December. Please find the code in the link below. So please help me, it's a request. Also can you share your emailid.

Thanks
Rahul Kumar


Attachment: Electrical_9121565d.zip

AR Aravind Ravi Syncfusion Team December 7, 2020 12:20 PM UTC

Hi Rahul, 
 
We have modified a sample to check the diagram connections. On analyzing the provided code snippet, you does not set the reference for the diagram. So that null exception raises when try to check the connection. In your sample please set reference for the diagram, So that you can able to access the diagram properties and methods. Please refer below code snippet 
 
<div id="diagram"> 
        <SfDiagram @ref="@Diagram" Height="1000px" Width="1000px" ></SfDiagram> 
    </div> 
 
@code { 
    SfDiagram Diagram; 
 
We have modified the index.razor file and attached for your reference. Please find the sample in below link 
 
 
Regards 
Aravind Ravi 


Loader.
Up arrow icon