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. Image for the cookie policy date

Dialog Flicker

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>




3 Replies

SS Selvamani Sankarappan Syncfusion Team November 23, 2016 12:22 PM UTC

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:   
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.  



DO Donald November 23, 2016 05:16 PM UTC

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

  


SS Selvamani Sankarappan Syncfusion Team November 24, 2016 06:16 AM UTC

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon