1. Home
  2. Forum
  3. jQuery
  4. Replace alert function with Dialog control feature

Replace alert function with Dialog control feature

Hello,

Please replace alert function with Dialog control feature & make changes accordingly. Please refer to the code snippet attached

Attachment: index41727841465_9bb95638.zip

9 Replies 1 reply marked as answer
MK Muthukrishnan Kandasamy Syncfusion Team December 14, 2020 07:53 AM UTC

 
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. 
 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 
 


Marked as answer
RK Rahul Kumar December 15, 2020 05:54 AM UTC

Hello sir,

Thanks for the solution, i want to ask another query i.e. how can i change background color of the title in dialog control feature. Please refer to the above code & make changes accordingly

Thanks
Rahul Kumar

MK Muthukrishnan Kandasamy Syncfusion Team December 16, 2020 11:05 AM UTC

 
Hi Rahul, 
 
Thanks for the update. 
 
We can customize the Dialog control by using our custom styles. For applying specific styles for each Dialog control, we can use the CssClass property. Please refer to the below code block. 
 
<script type="text/javascript"> 
 
        $(window).load(function () { 
            // declaration 
            $("#dialog").ejDialog({  
              title: "Alert Dialog", 
              showOnInit: false, 
              cssClass: "custom" 
            }); 
        }); 
 
… 
 
    <style class="cssStyles"> 
 
      /*dialog header */ 
        .custom.e-dialog .e-header { 
            background: bisque; 
            border-bottom: 3px solid blue; 
        } 
 
        /*dialog header title*/ 
        .custom.e-dialog .e-title{ 
            color: red; 
        } 
 
 
Please refer to the below link for the sample. 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 


RK Rahul Kumar December 16, 2020 03:09 PM UTC

Hello sir,

Thank you for the code but it is not working. Please make changes in my code snippet shared above

Thanks 
Rahul Kumar

MK Muthukrishnan Kandasamy Syncfusion Team December 17, 2020 07:36 AM UTC

 
Hi Rahul, 
 
We have modified your shared sample for your convenience, which can be downloaded from the below link. 
 
 
Please check out the below screenshot of the shared sample. 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 
 


RK Rahul Kumar December 17, 2020 12:43 PM UTC

Hello sir,

Please refer to index4.html file & make changes in the updated attachment below. The query is as same mentioned above.


Thanks
Rahul Kumar 

Attachment: RRR__Copy_52755d33.zip

MK Muthukrishnan Kandasamy Syncfusion Team December 18, 2020 06:28 AM UTC

 
Hi Rahul, 
 
As per your request, we have modified your updated sample for your convenience, which can be downloaded from the below link. 
 
 
Please check out the below screenshot of the shared sample. 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 
 


RK Rahul Kumar December 19, 2020 05:22 AM UTC

Hello sir,

Thank you for the solution !!. I want to ask one query, i.e. how can i change the color of control buttons of dialog box.

Thanks
Rahul Kumar

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team December 21, 2020 04:11 AM UTC

Hi Rahul, 

Thanks for the update. 

To customize the color of Dialog buttons, you can apply the following custom styles in your sample. We have applied the custom demo styles for your reference in the attached sample. 

[styles] 
/*custom styles for changing color of dialog buttons*/ 
.e-dialog .e-dialog-icon.e-close:before{ 
               color:red; 
               } 
               .e-dialog .e-dialog-icon.e-maximize:before{ 
               color:green; 
               } 
                
               .e-dialog .e-dialog-icon.e-minus:before{ 
               color:blue; 
               } 
                
               .e-dialog .e-dialog-icon.e-search:before{ 
               color:brown; 
               } 


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

Regards, 
Shameer Ali Baig S. 



Loader.
Up arrow icon