This is a migrated thread and some comments may be shown as answers.

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

2 Answers 189 Views

Window

This is a migrated thread and some comments may be shown as answers.

Luke asked on 03 Nov 2011, 08:33 AM

CustomLoadingPanelDisplayedCorrectlyTheFirstTimeTheButtonIsClicked.png

CustomLoadingPanelDisplayedIncorrectlyTheSecondTimeTheButtonIsClicked.png

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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 Answers, 1 is accepted

Accepted

answered on 03 Nov 2011, 12:55 PM

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