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.
Unfortunately, activation email could not send to your email. Please try again.

How to display a confirmation dialog

Thread ID:

Created:

Updated:

Platform:

Replies:

128171 Jan 5,2017 05:38 PM Jan 9,2017 05:16 AM ASP.NET Core 3
loading
Tags: Dialog
dsapo
Asked On January 5, 2017 05:38 PM

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 [Syncfusion]
Replied On January 6, 2017 06:38 AM

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. 


dsapo
Replied On January 6, 2017 10:18 AM

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 [Syncfusion]
Replied On January 9, 2017 05:16 AM

 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.   


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;