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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to display a confirmation dialog

Thread ID:





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

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


Rekha J [Syncfusion]
Replied On 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"> 
                <div class="cnt"> 
                    Do you really leave the session?  
//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 class="condition" style="float:left; margin-left:15px;margin-top:5px">   
        <input type="checkbox" />Dont ask me this again<br/>   
<script type="text/javascript"> 
    function Close() { 
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, 

Replied On 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


Rekha J [Syncfusion]
Replied On 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">   
<script type="text/javascript">   
    function onclick() {   
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:   


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon