Replace alert function with Dialog control

[Rahul Kumar]

Hello sir,

Please replace alert function of "correct & wrong connection" with dialog control feature. Please refer to my code snippet & make changes accordingly.

Thanks

Rahul Kumar

Attachment: RRR_(2)_a85a67fa.zip

[Rahul Kumar]

Hello,

Please reply & resolve my above mentioned query.

Thanks

Rahul Kumar

[Muthukrishnan Kandasamy]

 

Hi Rahul, 

 

Thanks for contacting Syncfusion support. 

 

We have validated your requirement with EJ Dialog control. We can dynamically show the Dialog control by using open method based on our conditions and also, we can update the dialog content by using setContent method. Please refer to the below code block. 

 

 

    <div id="dialog"></div> 

... 

.... 

 

$(function() { 

            var Shapes = ["Resistor", "Potentiometer1"]; 

            var ports = ["Resistor_port1", "Resistor_port2", "Potentiometer1_port1", "Potentiometer1_port1"]; 

            var connector = ["Link1", "Link21"]; 

            var yy = document.getElementById("check") 

            yy.onclick = showAlert; 

            var diagram = $("#diagram").ejDiagram("instance"); 

 

            function showAlert(event) { 

                var dialogObj = $("#dialog").ejDialog("instance"); 

                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){ 

                    dialogObj.setContent("Correct Connections");     

                    $("#dialog").ejDialog("open"); 

                }    

                else if (connector.sourcePort == ports.Resistor_port2 && connector.targetPort == ports.Resistor_port2) { 

                    dialogObj.setContent("Correct Connections");     

                    $("#dialog").ejDialog("open"); 

                } 

                else if (connector.sourcePort != ports.Resistor_port1 && connector.targetPort != ports.Resistor_port1){ 

                    dialogObj.setContent("Wrong Connections");     

                    $("#dialog").ejDialog("open"); 

                } 

                else if (connector.sourcePort != ports.Resistor_port2 && connector.targetPort != ports.Resistor_port2){ 

                    dialogObj.setContent("Wrong Connections");     

                    $("#dialog").ejDialog("open"); 

                } 

                else if (diagram.model.connectors.length <= 0 && diagram.model.connectors.length > 2) { 

                    dialogObj.setContent("Please use appropraite connections");     

                    $("#dialog").ejDialog("open"); 

                } 

                else { 

                    dialogObj.setContent("First make connections");     

                    $("#dialog").ejDialog("open"); 

                } 

 

                } 

 

            } 

        }); 

 

 

We have made changes in your shared sample which can be downloaded from the below link. 

 

https://www.syncfusion.com/downloads/support/forum/160536/ze/index41211938295 

 

Documentation: https://help.syncfusion.com/js/dialog/getting-started 

 

API: https://help.syncfusion.com/api/js/ejdialog 

 

Demo: https://js.syncfusion.com/demos/jquery/#!/bootstrap/dialog/DefaultFunctionalities 

 

Please let us know, if you need any further assistance. 

 

Regards, 

Muthukrishnan K