How to display a confirmation dialog

[dsapo]

Hi Support:

How do I create a confirmation dialog using the ej-dialog control in ASP.NET Core.

I need to display a title, a content text and a button to close the dialog.

Thanks in advanced

David

[Rekha J]

Hi David, 

Thanks for contacting Syncfusion support. 

Query: How do I create a confirmation dialog using the ej-dialog control in ASP.NET Core. 

To create a confirmation Dialog in ASP.NET core using “ej-dialog”, we suggest you to use footer template option in it.  Using “e-content-template” and “title” property add a simple confirmation content and title. Enable “show-footer” property for adding footer section to the Dialog. Define a script render template for adding button and assign its ID to “footer-template-id”. In Button click handler, call close method for Dialog object. 

For your reference, please refer the code snippet to achieve this. 

 

<ej-dialog id="basicDialog" title="Confirmation Dialog" containment=".control"  min-height="215" is-responsive="true" show-footer="true" footer-template-id="sample"> 

        <e-content-template> 

           <div>                            

                <div class="cnt"> 

                    Do you really leave the session?  

                </div>               

            </div> 

        </e-content-template> 

    </ej-dialog> 

 

//adding Footer Section 

<script id="sample" type="text/x-jsrender"> 

<div style="float:right">                

        <button id="btn1" style="text-align:center;width:60px;margin:auto;" onclick="Close()"> Ok</button> 

        <button id="btn2" style="margin-top:5px;margin-left:30px;margin-right:20px;text-align:center;width:60px;">Cancel</button> 

    </div> 

    <div class="condition" style="float:left; margin-left:15px;margin-top:5px">   

        <input type="checkbox" />Dont ask me this again<br/>   

    </div>    

</script> 

 

<script type="text/javascript"> 

    function Close() { 

        $("#basicDialog").ejDialog("close"); 

    } 

</script> 

 

For your convenience, we have created a simple sample and sample is available in: 

http://www.syncfusion.com/downloads/support/forum/128171/ze/ConfirmationDialog_(2)-1291211375.zip 

For your reference, please refer our online documentation for Getting Started of Dialog in ASP.NET Core. 

https://help.syncfusion.com/aspnet-core/dialog/getting-started 

We would be happy to assist you for further queries, 

Regards, 

Rekha. 

[dsapo]

Thanks Rekha for your quick response.

Your sample helped me a lot, but I only have one little thing pending.

I set show-on-init to false, because we need to display the dialog on demand.  The problem is that the text inside the content-template still shows in the web page.  Is strange because the pop up is not shown, but the text is showing.

Any idea how to hide the whole dialog?

Thanks again

David 

[Rekha J]

 Hi David,   

Thanks for the update.   

We were unable to reproduce the issue on “text inside the content-template still shows in the web page”. To hide the whole dialog on initial rendering, please use “e-show-on-init” property as false and you can open the dialog using button click handler.   

Please refer to the below code snippet to achieve this.   

   

<ej-button id="btnOpen" text="Click to open dialog" click="onclick" />   

    <ej-dialog id="basicDialog" title="Confirmation Dialog" containment=".control" min-height="215" is-responsive="true" show-on-init="false" show-footer="true" footer-template-id="sample">   

    </ej-dialog>   

   

<script type="text/javascript">   

    function onclick() {   

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

        $("#btnOpen").hide();   

    }   

    </script>   

  

For your reference, we have made a simple sample and the sample is available at:   

http://www.syncfusion.com/downloads/support/forum/128171/ze/Confirmation_Dialog_(2)1006716748.zip   

For your reference, we have recorded a video on the demo sample and the video is available in:   

http://www.syncfusion.com/downloads/support/forum/128171/ze/confirmation_dialogV1188297360.zip   

Regards,   

Rekha.