1. Home
  2. Forum
  3. jQuery
  4. Alert function of valid ports is not working

Alert function of valid ports is not working

Hello,
I want to perform a check function in which all the ports must be checked whether they are correct connected or not, if the sourceportid is connected to correct targetportid, then it will display alert message as "Correct Connections" else "Wrong Connections". All this must be done after clicking on the check button. Please find the attached file below & make changes accordingly.

Thanks
Rahul Kumar

Attachment: index4_8423db0.zip

8 Replies
AR Aravind Ravi Syncfusion Team December 10, 2020 06:14 AM UTC

Hi Rahul, 
 
We have modified the sample to show alert message when connector connected on wrong port. First get the diagram instance using diagram id. After get the diagram instance, get the connectors rendered in the diagram by using the diagram.model. Iterate all the connectors in the diagram and check if it is connected to correct port using the connector’s sourcePort and targetPort properties. Please refer below code snippet 
 
var diagram = $("#diagram").ejDiagram("instance"); 
 
            function showAlert(event) { 
                for(var i = 0 ; i < diagram.model.connectors.length ; i++) { 
                var connector = diagram.model.connectors[i]; 
                if (connector.sourcePort == ports.Resistor_port1 && connector.targetPort == ports.Resistor_port1) 
                    alert("Correct Connections"); 
                else if (connector.sourcePort == ports.Resistor_port2 && connector.targetPort == ports.Resistor_port2) 
                    alert("Correct Connections"); 
                else if (connector.sourcePort != ports.Resistor_port1 && connector.targetPort != ports.Resistor_port1) 
                    alert("Wrong Connections"); 
                else if (connector.sourcePort != ports.Resistor_port2 && connector.targetPort != ports.Resistor_port2) 
                    alert("Wrong Connections"); 
                else if (diagram.model.connectors.length <= 0 && diagram.model.connectors.length > 2) 
                    alert("Please use appropraite connections"); 
                else 
                    alert("First make connections"); 
                } 
 
            } 
 
 
Regards 
Aravind Ravi 


RK Rahul Kumar December 11, 2020 05:53 AM UTC

Hello sir,

Thank you for the solution, but solution is not working properly. It always shown alert message of "wrong connections" else nothing.Please refer to my code snippet attached & make changes accordingly.

Thanks 
Rahul Kumar

RK Rahul Kumar December 13, 2020 06:23 AM UTC

Hello sir,

Please reply & resolve my query mentioned above.


Thanks
Rahul Kumar

AR Aravind Ravi Syncfusion Team December 14, 2020 12:06 PM UTC

Hi Rahul, 

On analyzing the provided code snippet you have added the randomID for the ports. So while checking the connections, it shows wrong connections. So if you want to check the connection means then do not add randomId for the port. We have modified a sample to remove the randomID for some ports. In the check connection function you have checked the port connection as port.Resistor_Port1, but it returns as undefined. Please check the port id as “Resistor_Port1” or ports[0]. Please refer to below code snippet and modified sample 

ports: [{ 
//Do not add random ID at last of port name 
                            name: "Resistor_port1", 
                            offset: { 
                                x: 0, 
                                y: 0.5 
                            }, 
                            shape: ej.datavisualization.Diagram.PortShapes.Circle, 
                            visibility: true, 
                            fillColor: "red", 
                            size: 12 
                        }, { 
                           name: "Resistor_port2", 
                            offset: { 
                                x: 1, 
                                y: 0.5 
                            }, 
                            shape: ej.datavisualization.Diagram.PortShapes.Circle, 
                            visibility: true, 
                            fillColor: "red", 
                            size: 12 
                        }, ] 

function showAlert(event) { 
                for(var i = 0 ; i < diagram.model.connectors.length ; i++) { 
                var connector = diagram.model.connectors[i]; 
                if (connector.sourcePort == "Resistor_port1" && connector.targetPort == "Resistor_port1") 
                    alert("Correct Connections"); 
                else if (connector.sourcePort == "Resistor_port2" && connector.targetPort == "Resistor_port2") 
                    alert("Correct Connections"); 
                else if (connector.sourcePort != "Resistor_port1" && connector.targetPort != "Resistor_port1") 
                    alert("Wrong Connections"); 
                else if (connector.sourcePort != "Resistor_port2" && connector.targetPort != "Resistor_port2") 
                    alert("Wrong Connections"); 
                else if (diagram.model.connectors.length <= 0 && diagram.model.connectors.length > 2) 
                    alert("Please use appropraite connections"); 
                else 
                    alert("Wrong Connections"); 
                } 

            } 


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


Similarly, in your sample you can remove the randomID for the ports and check connection for the connector as your need by using the connector sourcePort and targetPort properties.  

Regards 
Aravind Ravi 


RK Rahul Kumar December 18, 2020 05:09 PM UTC

Hello sir, 

Thank you for the solution. I want to ask another query i.e. How can i add buttons in the symbol palette & also button click function. Please explain it with example.

Thanks
Rahul Kumar

AR Aravind Ravi Syncfusion Team December 21, 2020 10:17 AM UTC

Hi Rahul, 
 
We have created a sample to render HTML shapes in the palette. By using the HTML shape we can able to render button inside node. Html elements can be embedded in the Diagram through Html type node. To create a HTML node, you need to set the type of node as “html”. In addition, you need to set the id of HTML template to the templateId property of node. Please refer below code snippet for how to set HTML node in the palette 
 
<!—define html element--> 
<script id="htmlTemplate" type="text/x-jsrender"> 
            <div> 
                        <input type="button" value="BUtton" /> 
            </div> 
</script> 
 
var palettes = [ 
        { 
            name: "HTML Shapes", 
            expanded: true, 
            items: [ 
                     //add the HTML shapes to the symbol palette 
                   { 
            name: "htmlNode", offsetX: 100, offsetY: 100, 
            width: 120, height: 60, 
             
            //Sets type as Html 
            type: ej.datavisualization.Diagram.Shapes.Html, 
             
            //Sets id of html template 
            templateId: "htmlTemplate", 
            value: "Button" 
} 
                     
            ] 
        }, 
              
    ]; 
 
 
For more information about how to set HTML node in the diagram, please refer to below UG documentation link 
 
 
Regards 
Aravind Ravi 


RK Rahul Kumar December 30, 2020 06:48 AM UTC

Hello sir,

What is the condition to check whether the diagram is null or not. Please refer to index3.html file attached below & make changes accordingly

Thanks 
Rahul Kumar


Attachment: index3_277b4961.zip

AR Aravind Ravi Syncfusion Team December 31, 2020 07:33 AM UTC

Hi Rahul, 

We have modified a sample to check if the diagram is empty or not. By using the diagram model’s nodes and connectors property we can check if the diagram work area is empty or not. In the ShowAlert function check if the diagram nodes and connectors length is greater than 0 or not. Please refer to below code snippet and video demonstration of how check functionality gets work 

function showAlert(event) { 
                var dialogObj = $("#dialog").ejDialog("instance"); 
// Check diagram nodes and connectors length equal to zero or not. 
                if(diagram.model.nodes.length === 0 && diagram.model.connectors.length === 0) 
                { 
                       dialogObj.setContent("Diagram working area is empty ! Please draw circuit first"); 
                        $("#dialog").ejDialog("open"); 
                } 



We have attached a sample for your reference. Please find the sample in below link 


Regards 
Aravind Ravi 


Loader.
Up arrow icon