Custom loading panel is only displayed correctly first time window is loaded

3 posts, 1 answers
  1. Luke
    Luke avatar
    3 posts
    Member since:
    Apr 2009

    Posted 03 Nov 2011 Link to this post

    Hello. I have followed the instructions in this article in order to display a custom loading panel when opening a RadWindow:

    http://www.telerik.com/support/kb/aspnet-ajax/window/custom-loading-sign-for-radwindow.aspx

    This worked great for me - thanks for putting it together. I am noticing, however, that the custom loading panel only displays correctly the first time the window is loaded - every time after that, the loading panel is not displayed correctly, even when ReloadOnShow=true for the window. When the entire page is reloaded, the loading panel displays correctly, but again, only on the first show.

    I have modified the sample project from the above link to demontrate the problem and included both code and images displaying the behavior.

    Default.aspx - Defines a window with ReloadOnShow=true that uses a custom loading panel
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrfix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title>Untitled Page</title>
        <style type="text/css">
            .rwLoading
            {
                background-image: none !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
     
        <script type="text/javascript">
            var loadingSign = null;
            var contentCell = null;
            function openRadWnd()
            {
                $find("<%=RadWindow1.ClientID %>").show();
            }
     
            function OnClientShow(sender, args)
            {
                loadingSign = $get("loading");
                contentCell = sender._contentCell;
                if (contentCell && loadingSign)
                {
                    contentCell.appendChild(loadingSign);
                    contentCell.style.verticalAlign = "middle";
                    loadingSign.style.display = "";
                }
            }
     
            function OnClientPageLoad(sender, args)
            {
                if (contentCell && loadingSign)
                {
                    contentCell.removeChild(loadingSign);
                    contentCell.style.verticalAlign = "";
                    loadingSign.style.display = "none";
                }
            }
         
        </script>
     
        <telerik:RadWindow ID="RadWindow1" runat="server" NavigateUrl="ChildPage.aspx" ShowContentDuringLoad="false"
            OnClientShow="OnClientShow" OnClientPageLoad="OnClientPageLoad" ReloadOnShow="true">
        </telerik:RadWindow>
     
        <input type="button" id="btnOpen" value="Click once, close the window, and then click again - loading panel will not display correctly the second time" onclick="openRadWnd(); return false;" />
        
        <div id="loading" style="border: solid 1px Red; width: 100px; height: 50px; display: none;
            text-align: center; margin: auto;">
            Custom<br />
            loading....
        </div>
        </form>
    </body>
    </html>

    Child.aspx - The window content
    <%@ Page Language="C#" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
     
        <script type="text/C#" runat="server">
         
            protected void Page_Load(object sender, EventArgs e)
            {
                System.Threading.Thread.Sleep(3000);
            }
             
        </script>
     
        TEST CONTENT
        </form>
    </body>
    </html>

    Thank you for your help.
  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    4609 posts

    Posted 03 Nov 2011 Link to this post

    Hi Luke,

    The KB article was developed for the scenario when the ReloadOnShow was not used. What happens is that the appendChild() method removes the original div (this is just the way it works) and on subsequent displays loadingSign is therefore null. What you can do is use the cloneNode() method to keep the original markup in the document:
    var loadingSign = null;
    var contentCell = null;
    var loadingSignCopy = null;
    function openRadWnd()
    {
        $find("<%=RadWindow1.ClientID %>").show();
    }
     
    function OnClientShow(sender, args)
    {
        loadingSign = $get("loading");
        loadingSignCopy = loadingSign.cloneNode(true);
        contentCell = sender._contentCell;
        if (contentCell && loadingSign)
        {
            contentCell.appendChild(loadingSignCopy);
            contentCell.style.verticalAlign = "middle";
            loadingSignCopy.style.display = "";
        }
    }
     
    function OnClientPageLoad(sender, args)
    {
        if (contentCell && loadingSign)
        {
            contentCell.removeChild(loadingSignCopy);
            contentCell.style.verticalAlign = "";
        
        }
    }

    As a token of gratitude for reporting this scenario I have updated your Telerik points. The KB article itself will also be updated shortly.

    Best wishes,
    Marin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. Luke
    Luke avatar
    3 posts
    Member since:
    Apr 2009

    Posted 03 Nov 2011 Link to this post

    This change worked perfectly. Thank you for the quick response.
Back to Top