1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Show dialog only when needed

Show dialog only when needed

Hello

I am using ASP.NET CORE EJ 2 version 16.1.0.37 (nuget package).

When creating a modal dialog I would like to hide it by default and only show it on demand. Thus I set the "Visible" property to "false". However, when visiting the site the dialog is always displayed right away.
I found a workaround by using the "Created" event and hiding the dialog there, then it shows up only briefly before it is hidden.

@Html.EJS().Dialog("MyDialogId").Visible(false).IsModal(true).Created("onDialogCreated").Target("body").Width("300px").Height("300px").Position(p => p.X("center").X("center")).Content("").Header("").Buttons(new List<DialogDialogButton>
{
    new DialogDialogButton{ ButtonModel = new { content = "OK" }, Id = "myDialogButtonId", Click = "dialogButtonClicked" }
}).Render()

<script>
...
          function onDialogCreated(args) {
            var dialog = document.getElementById("MyDialogId").ej2_instances[0];
            dialog.hide();
        }
...
</script>

When visiting the demo site for the dialog control the same issue seems to happen. In the source the "Visible" property is set to "false" but they still show up and are hidden a few seconds later.

Is there a better solution to hide the dialog by default and only showing it when needed?


Kind regards
Phil

9 Replies
KR Karthik Ravichandran Syncfusion Team April 27, 2018 12:56 PM UTC

Hi Phil, 

Sorry for the inconvenience caused. 

We have checked your query. This is a known issue in our side and we have already fixed this issue internally. Fix for this issue will be included in our upcoming main release essential studio volume 2, 2018 which is expected to be rolled out in the last week of May 2018. Please be patient until then. 

As a work around, we suggest you to use the hide() public method in dialog component. Please refer the below documentation link. 

Regards, 
Karthik R 


UN Unknown April 27, 2018 02:14 PM UTC

Thank you for the update.

Then I will wait until the fix is available.

KR Karthik Ravichandran Syncfusion Team April 30, 2018 05:55 AM UTC

Hi Phil, 

Thanks for your update. We will let you know once essential studio volume2, 2018 is rolled out. 

Regards, 
Karthik R 


KT Kagisho Tsoka June 9, 2018 05:50 PM UTC

Hi there

What is the update on the roll-out of essential studio volume2 2018? The hide() method that you suggested does not close the dialog immediately, the dialog is visible for a few seconds and then disappears.

KR Karthik Ravichandran Syncfusion Team June 11, 2018 10:18 AM UTC

Hi Kagisho, 
 
Thanks for your update. 
 
The Volume 2, 2018 release is expected to be roll-out in the last week of this month. The fix for this issue will be included in this release. 
 
While closing the dialog using hide () method, the dialog will be rendered and closed immediately. Could you please use the below solution to close the dialog before it opens?  
-    Cancel the dialog open in the beforeOpen event 
Please refer the below code block. 
 
<ejs-dialog id="default_dialog" width="500px" target=".target" beforeOpen="OnBeforeOpen" Content="Syncfusion" showCloseIcon="true" header="Dialog">     
</ejs-dialog> 
 
 
[script] 
var closeDialog = true; 
 
function OnBeforeOpen(args) { 
    if (closeDialog) { 
        args.cancel = true; 
        closeDialog = false; 
    } 
} 
 
 
For your reference, we have prepared the sample and attached in the below link. 
 
Regards,
Karthik R 


KT Kagisho Tsoka June 13, 2018 03:29 AM UTC

Thank you, it works. I knew I had to do something in the BeforeOpen event but I wasn't sure what. I appreciate your quick response.

KR Karthik Ravichandran Syncfusion Team June 13, 2018 12:42 PM UTC

Hi Kagisho, 
 
Most welcome. We are glad that your problem is solved. 
 
Regards,
Karthik R 


SD Shaun Danielz August 16, 2018 07:10 AM UTC

Hi there,

Has this been resolved now in  Volume 2, 2018?  Still seems to be happening in EJS 2 for Angular.

KV Karthikeyan Viswanathan Syncfusion Team August 18, 2018 04:28 AM UTC

Hi Shaun, 
 
We have included the “ Visible API not working” issue fix in our volume 2, 2018 release v16.2.41. We have checked with the latest source and reported issue is not reproduced in our end.  
 
We have checked in both ASP.Net core and angular platforms, but we couldn’t reproduced the reported issue in our side. For your convenience we have prepared the sample in the below links. 


ASP.Net core sample: 

So, we are suggested to use the latest version packages for ej2-ng-popups. 
 
Regards, 
Karthikeyan V. 


Loader.
Up arrow icon