We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to display a confirmation dialog

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

3 Replies

RJ Rekha J Syncfusion Team January 6, 2017 11:38 AM UTC

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: 
For your reference, please refer our online documentation for Getting Started of Dialog in ASP.NET Core. 
We would be happy to assist you for further queries, 
Regards, 
Rekha. 



DS dsapo January 6, 2017 03:18 PM UTC

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 


RJ Rekha J Syncfusion Team January 9, 2017 10:16 AM UTC

 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:   
For your reference, we have recorded a video on the demo sample and the video is available in:   
Regards,   
Rekha.   


Loader.
Live Chat Icon For mobile
Up arrow icon