Dialog window is displayed by default

[Yury Gerasimov]

Hi,

I have added Dialog control to my web page and when the page is opened the dialog is displayed by default. But it should be shown only when user clicks a button. I tried to use property visible="false", but without any difference.

You can see the same issue for the Syncfusion Dialog demo

Dialog, Default functionality

Below is my code

<div class="control-section" id="subscriptionsContainer">
    <ejs-button id="normalbtn" content="Open"></ejs-button>
 
    <ejs-dialog id="dialogCard" content="Test" isModal="true" visible="false" animationSettings="defaultAnimation" target="#subscriptionsContainer" width="200px" height="110px">
        <e-dialog-buttons>
            <e-dialog-buttons>
                <e-dialog-dialogbutton buttonModel="ViewBag.confirmButtonYes" click="saveCard"></e-dialog-dialogbutton>
                <e-dialog-dialogbutton buttonModel="ViewBag.confirmButtonNo" click="cancelCard"></e-dialog-dialogbutton>
            </e-dialog-buttons>
        </e-dialog-buttons>
    </ejs-dialog>
</div>
 
<script>
    document.getElementById("normalbtn").addEventListener('click', function () {
        var dialogObj = document.getElementById("dialogCard")
        dialogObj.ej2_instances[0].show();
    });
</script>

[Yury Gerasimov]

I just noticed that related thread with that issue is already exist (137256). As i can understand it's a bug, but before you release Volume 2, is there any workaround?

[Narayanasamy Panneer Selvam]

Hi Yury, 

 

We have already fixed the issue “Dialog does not hide based on visible property” internally. The fix for the 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.  

We suggest you use the below workaround solution until then. Use hide() method in created event of dialog component. Please refer the below links.  

<script> 

   function onCreated() { 

      var dialogObj = document.getElementById("default_dialog").ej2_instances[0]; 

      dialogObj.hide(); 

   } 

</script> 

 

Workaround demo: http://www.syncfusion.com/downloads/support/forum/137311/ze/CoreWebApplication1-808304352  

Api Link: https://ej2.syncfusion.com/documentation/dialog/api-dialog.html?lang=typescript#hide  

              : https://ej2.syncfusion.com/documentation/dialog/api-dialog.html?lang=typescript#created  

 

 

Regards, 

Narayanasamy P.