Dialog Flicker

[Donald]

Hi, 

I am hoping you can help me with this issue.  

I currently have a dialog on my web form that is opened from a JavaScript button click (I'm rather new to JS, so please excuse my stupidity).  The dialog has 'ShowOnInit="false" but what i am experiencing is that you can see the details of the dialog for a second or two when the page loads.  

The dialog does not have this problem when i set visibility=false but then i can't open it with my JS click. 

my water downed code is below:

<script type="text/javascript">

        function NewCase() {

            dialogObj = $("#<%=DiaNewCase.ClientID%>").data("ejDialog");

            dialogObj.open();

        };

</script>

<ej:Dialog ID="DiaNewCase" Content="#form1" ShowOnInit="false" EnableResize="false" Title="Cases - New Item" runat="server">

        <DialogContent></DialogContent>

</ej:Dialog>

[Selvamani Sankarappan]

Hi Donald,   

  

Thanks for using Syncfusion products.   

  

Query 1: The dialog has 'ShowOnInit="false" but what i am experiencing is that you can see the details of the dialog for a second or two when the page loads.      

We could re-produce this issue (The Dialog content just flickers at page loading if showOnInit as false) at our side. To overcome this issue, we suggest to set the visibility as hidden to Dialog’s the parent element and make it visible when we open the Dialog. Please refer to the following code example:   

[aspx]   

<div id="hidden" style="visibility:hidden">   

    <ej:Dialog ID="basicDialog" Width="550" Height="400" ShowHeader="true"        Content="#form1"  ClientSideOnClose="onDialogClose" runat="server" Title="Audi Q3   Drive" EnableRTL="false" ShowOnInit="false">   

              <DialogContent>   

            </DialogContent>   

    </ej:Dialog>   

</div>  

   

function onOpen() {   

        $("#hidden").css("visibility", "visible");   

        var dialogObj = $("#MainContent_basicDialog").data("ejDialog");   

        dialogObj.open();   

        $("#btnOpen").hide();   

    }   

   

Query 2: The dialog does not have this problem when i set visibility=false but then i can't open it with my JS click.    

This is not an issue but the behavior in ASP. If we set the visible as false on initial rendering of the any control, corresponding control elements will not be created. So, when we set false the Dialog control visibility on initial rendering, the wrapper elements are not created. That’s why, you were unable to open the Dialog on button click action, since the element is not available in DOM.   

Refer to the following sample:   

http://www.syncfusion.com/downloads/support/forum/127554/ze/Dialog_Sample606962504   

If we have misunderstood your requirement, please clarify us with further details on the issue you are facing with Dialog using video demo or screenshots.   

   

Regards,   

Selvamani S.  

[Donald]

Selvamani S.

Thank you for your help.  I can not believe how simple that solution was or that i did not originally try doing that.

It works great and at this time i am having no more issues!

Thanks again,

Donnie

  

[Selvamani Sankarappan]

Hi Donald, 

Thanks for the feedback, 

We are happy that the problem has been resolved at your end.  ​​​ 

Let us know if you need any further assistance. 

Regards,  

Selvamani S.