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

radajaxloadingpanel displaying image twice

6 Answers 200 Views

Ajax

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

Dana Cobb asked on 17 Jan 2013, 08:13 PM

loadingpanel-image-duplication.jpg

Here is my html

<center>

<div id="divloading" style="z-index: 9000;">

<table class="centertable" border="0" style="width: 400px;" cellpadding="0" cellspacing="0">

<tr>

<td style="text-align: center;">

<center><telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" HorizontalAlign="Center" runat="server"

Skin="Outlook" MinDisplayTime="1500" IsSticky="True" Style="position: absolute; top: 0; left: 0; height: 100%; width: 100%;" Transparency="20" >

<img src="ajaxloadingpanel_images/Loading.gif" title="Processing..." />

</telerik:RadAjaxLoadingPanel>

</center>

</td>

</tr>

</table></div></center>

Please see the attached screenshot to see example.

Thanks,

6 Answers, 1 is accepted

answered on 18 Jan 2013, 12:19 AM

Thanks for the suggestion, cleaner, but it didn't solve. It seems to me after playing around with tons of combinations that the top image is where I am telling the radloadingpanel to be

Style="position: absolute; top: 0; left: 0; height: 100%; width: 100%;"

and then it is showing also where it phyically is in the code. And when it appears it kicks all elements below it, down. and then when it disappears, the elements shift back up. Not very appealing. How can I control where it appears, by using IsSticky, but also make it the element on top when it appears so it won't shift my divs down?

be low is my current html.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="CloseIssue.aspx.vb" Inherits="CloseIssue" %>

<!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 id="Head1" runat="server">

<title>Close Issue</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script src="jquery.simplemodal.js" type="text/javascript"></script>

<script type="text/javascript" language="javascript">

//**********************************************************************

//******** THIS FEEDS

//**********************************************************************

function injectvalmessage(msg) {

$('#valerror_email').html(msg);

}

//**********************************************************************

//******** THIS OPENS THE PDF WINDOW

//**********************************************************************

function OpenRadNonPrintWindow(mvpage){

var oManager = GetRadWindowManager();

//Show a particular existing window

oManager.open(mvpage, "RadNonPrintWindow");

}

//**********************************************************************

//******** THIS OPENS THE PRINT WINDOW

//**********************************************************************

// function OpenRadPrintWindow(mvpage) {

// var oManager = GetRadWindowManager();

// //Show a particular existing window

// oManager.open(mvpage, "RadPrintWindow");

// }

//**********************************************************************

//******** THIS OPENS THE PREMIUM WINDOW

//**********************************************************************

function OpenRadPremiumWindow(mvpage) {

var oManager = GetRadWindowManager();

//Show a particular existing window

oManager.open(mvpage, "RadPremiumWindow");

}

//**********************************************************************

//******** THIS OPENS THE RENEWALS WINDOW

//**********************************************************************

function OpenRadRenewalsWindow(mvpage) {

var oManager = GetRadWindowManager();

//Show a particular existing window

oManager.open(mvpage, "RadRenewalsWindow");

}

//**********************************************************************

//******** THIS IS NOT USED YET, BUT MIGHT WORK TO PROMPT HAVEN'T SAVED CSV FILE

//**********************************************************************

function OnClientBeforeClose(sender, args) {

var hdnPreventClose = $get("download_check", sender.get_contentFrame());

alert(hdnPreventClose)

args.set_cancel(!confirm('Are you sure you want to quit without downloading the file? You will not be able to finish the issue close until you have downloaded the file.'));

}

function OnGenericClose() {alert('Calling OnGenericClose');}

function CallGenericSuccess(res, destCtrl) {

//alert('Calling CallGenericSuccess');

//alert('Call succeeded - response is ' + res)

//var dest = document.getElementById(destCtrl);

//dest.value = res;

//location.reload();

location.href = 'closeissue4.aspx?brandid=' + res;

}

//**********************************************************************

//******** THIS RUNS WHEN PDF WINDOW CLOSES

//**********************************************************************

function OnPdfClose() {

//alert('onpdfclose');

window.location.href = window.location.href;

}

//**********************************************************************

//******** THIS RUNS WHEN PREMIUM WINDOW CLOSES

//**********************************************************************

function OnPremiumClose() {

window.location.href = window.location.href;

}

//**********************************************************************

//******** THIS RUNS WHEN RENEWALS WINDOW CLOSES

//**********************************************************************

function OnRenewalsClose() {

window.location.href = window.location.href;

}

//**********************************************************************

//******** THIS RUNS WHEN PRINT AJAX CALL SUCCEEDS

//**********************************************************************

function CallPrintSuccess(res, destCtrl) {

//alert('Call succeeded - response is ' + res)

//var dest = document.getElementById(destCtrl);

//dest.value = res;

//location.reload();

location.href = 'closeissue.aspx?brandid=' + res;

}

//**********************************************************************

//******** THIS RUNS WHEN PREMIUM AJAX CALL SUCCEEDS

//**********************************************************************

function CallPremiumSuccess(res, destCtrl) {

alert('Call succeeded - response is ' + res)

//var dest = document.getElementById(destCtrl);

//dest.value = res;

//location.reload();

location.href = 'closeissue.aspx?brandid=' + res;

}

//**********************************************************************

//******** THIS RUNS WHEN RENEWALS AJAX CALL SUCCEEDS

//**********************************************************************

function CallRenewalSuccess(res, destCtrl) {

alert('Call succeeded - response is ' + res)

//var dest = document.getElementById(destCtrl);

//dest.value = res;

//location.reload();

location.href = 'closeissue.aspx?brandid=' + res;

}

//**********************************************************************

//******** THIS RUNS WHEN AJAX CALL FAILS

//**********************************************************************

function CallFailed(res, destCtrl) {

alert('an error occurred while processing your request.')

//alert(res.get_message());

}

</script>

<link href="CFStyles.css" rel="stylesheet" type="text/css" />

<link href="css/basic.css" rel="stylesheet" type="text/css" />

<noscript>

<div id="noscript_msg"

>Your browser does not support javascript. You will not be able to interact with this page unless javascript is turned on<

br /><br /><br /></div>

</noscript>

<style type="text/css">

.td_ci_col1{ width: 225px; font-weight: bold; font-size: 8pt; font-family: Arial;text-align: right; padding-top: 5px; padding-right: 5px; padding-bottom: 5px;}

.td_ci_col2{width: 100px; padding-top: 2px; padding-left: 2px; padding-bottom: 2px; }

.td_ci_col3{width: 300px; text-align: center;}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadCodeBlock id="RadCodeBlock1" runat="server">

<script type="text/javascript">

function centerLoadingPanel() {

centerElementOnScreen($get("<%= RadAjaxLoadingPanel1.ClientID %>"));

}

function centerElementOnScreen(element) {

var scrollTop = document.body.scrollTop;

var scrollLeft = document.body.scrollLeft;

var viewPortHeight = document.body.clientHeight;

var viewPortWidth = document.body.clientWidth;

if (document.compatMode == "CSS1Compat") {

viewPortHeight = document.documentElement.clientHeight;

viewPortWidth = document.documentElement.clientWidth;

if (!$telerik.isSafari) {

scrollTop = document.documentElement.scrollTop;

scrollLeft = document.documentElement.scrollLeft;

}

var topOffset = Math.ceil(viewPortHeight / 2 - element.offsetHeight / 2);

var leftOffset = Math.ceil(viewPortWidth / 2 - element.offsetWidth / 2);

var top = scrollTop + topOffset - 40;

var left = scrollLeft + leftOffset - 70;

element.style.position = "absolute";

element.style.top = top + "px";

element.style.left = left + "px";

}

</script>

</telerik:RadCodeBlock>

<telerik:RadWindowManager ID="RadWindowManager1" keepscreeninbounds = "True" runat="server" ShowContentDuringLoad="False">

<Windows>

<telerik:RadWindow runat="server" Behavior="Default" InitialBehavior="None" Height="600px"

Title="" Width="700px" Modal="True" ShowContentDuringLoad="False" OnClientClose="OnPdfClose"

ID="RadNonPrintWindow">

</telerik:RadWindow>

<telerik:RadWindow runat="server" Behavior="Default" InitialBehavior="None" Height="600px"

Title="" Width="700px" Modal="True" ShowContentDuringLoad="False" OnClientClose="OnPdfClose"

ID="RadPrintWindow">

</telerik:RadWindow>

<telerik:RadWindow runat="server" Behavior="Default" InitialBehavior="None" Height="600px"

Title="" Width="700px" Modal="True" ShowContentDuringLoad="False" OnClientClose="OnRenewalsClose"

ID="RadRenewalsWindow">

</telerik:RadWindow>

<telerik:RadWindow runat="server" Behavior="Default" InitialBehavior="None" Height="600px"

Title="" Width="700px" Modal="True" ShowContentDuringLoad="False" OnClientClose="OnPremiumClose"

ID="RadPremiumWindow">

</telerik:RadWindow>

<telerik:RadWindow runat="server" Behavior="Default" InitialBehavior="None" Height="650px"

Title="" Width="800px" Modal="True" Left="300px" ShowContentDuringLoad="False" NavigateUrl="help'csv_help.htm"

ID="RadWindow_csvhelp">

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

<telerik:RadScriptManager ID="RadScriptManager1" Runat="server">

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"

DefaultLoadingPanelID="RadAjaxLoadingPanel1">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="lbl_CurrentIssue" />

<telerik:AjaxUpdatedControl ControlID="btn_Lock" />

<telerik:AjaxUpdatedControl ControlID="btn_Expires" />

<telerik:AjaxUpdatedControl ControlID="btn_Update" />

<telerik:AjaxUpdatedControl ControlID="litUpdateDate" />

<telerik:AjaxUpdatedControl ControlID="btn_RunNonPrint" />

<telerik:AjaxUpdatedControl ControlID="btn_RunPrint" />

<telerik:AjaxUpdatedControl ControlID="btn_RunPremium" />

<telerik:AjaxUpdatedControl ControlID="btn_RunRenewals" />

<telerik:AjaxUpdatedControl ControlID="btn_RunContinuations" />

<telerik:AjaxUpdatedControl ControlID="btn_RunInvoices" />

<telerik:AjaxUpdatedControl ControlID="btn_Unlock" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btn_Lock">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="btn_Expires" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btn_Expires">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="lnk_Expires" />

<telerik:AjaxUpdatedControl ControlID="lnk_CreditCancel" />

<telerik:AjaxUpdatedControl ControlID="btn_Update" />

<telerik:AjaxUpdatedControl ControlID="panel_radgrid" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="lnk_Expires">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="panel_radgrid" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="lnk_CreditCancel">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="panel_radgrid" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btn_Update">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="lnk_Expires" />

<telerik:AjaxUpdatedControl ControlID="lnk_CreditCancel" />

<telerik:AjaxUpdatedControl ControlID="litUpdateDate" />

<telerik:AjaxUpdatedControl ControlID="btn_RunNonPrint" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<table>

<tr>

<td>

<asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/Images/home_24.gif" NavigateUrl="~/Default.aspx"

Style="padding-right: 5px; padding-left: 20px" ToolTip="Return to Home Page">Home</asp:HyperLink></td>

<td style="font-weight: bold; font-size: 8pt; width: 125px; font-family: Arial">

Return Home</td>

</tr>

</table>

<table border="0" cellpadding="3" cellspacing="0" class="table_back" style="margin-left: auto;

margin-right: auto">

<tr>

<td style="font-weight: bold; font-size: 8pt; font-family: Arial">

Click on Brand...</td>

</tr>

<tr>

<td> <asp:ListBox ID="lstBrand" runat="server"

AutoPostBack="True" Width="400px" Rows="12" Font-Names="Arial"

Font-Size="8pt"></asp:ListBox></td>

</tr>

<tr><td style="text-align: center; padding-left: 50%;"></td></tr>

</table>

<center>

<div id="overlayDivoff" style="z-index: 9997;">

<table class="centertable" border="1" style="width: 400px; style="z-index: 9998;"" cellpadding="0" cellspacing="0">

<tr>

<td >

<center><telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"

Skin="Outlook" MinDisplayTime="1500" IsSticky="True" Transparency="20" style="z-index: 9999;">

<img src="ajaxloadingpanel_images/Loading.gif" title="Processing..." />

</telerik:RadAjaxLoadingPanel>

</center>

</td>

</tr>

</table></div></center><br />

<asp:Panel ID="Panel1" runat="server" Visible="False">

<table border="0" cellpadding="0" cellspacing="0" class="table_back" style="margin-right:auto; margin-left:auto;">

<tr>

<td class="td_ci_col1">Current Issue:</td>

<td class="td_ci_col2"><asp:Label ID="lbl_CurrentIssue" CssClass="date_blocks" Text="" runat="server"></asp:Label></td>

<td class="td_ci_col3"> </td>

</tr>

<tr>

<td class="td_ci_col1">Lock Current Issue:</td>

<td class="td_ci_col2"><asp:ImageButton ID="btn_Lock" runat="server" ImageUrl="~/Images/play_24.gif" ToolTip="Click to Lock Current Issue for Processing." /></td>

<td class="td_ci_col3">

</td>

</tr>

<tr>

<td class="td_ci_col1">Expires and Credit Cancels Run:</td>

<td class="td_ci_col2"><asp:ImageButton ID="btn_Expires" runat="server" ImageUrl="~/Images/play_24.gif" ToolTip="Click to run Expires and Credit Cancels for this Issue." /></td>

<td class="td_ci_col3">

<div style="float: left;"><asp:LinkButton ID="lnk_Expires" runat="server" Width="100px">Preview Expires</asp:LinkButton></div>

<div style="float: left;"><asp:LinkButton ID="lnk_CreditCancel" runat="server" Width="150px">Preview CreditCancels</asp:LinkButton></div>

</td>

</tr>

<tr>

<td class="td_ci_col1">Update Run:</td>

<td class="td_ci_col2"><asp:ImageButton ID="btn_Update" runat="server" ImageUrl="~/Images/play_24.gif" ToolTip="Click to run Update for this Issue." /></td>

<td class="td_ci_col3"></td>

</tr>

<tr>

<td class="td_ci_col1">Update Run Date:</td>

<td class="td_ci_col2"><asp:Literal ID="litUpdateDate" runat="server"></asp:Literal></td>

<td class="td_ci_col3"></td>

</tr>

<tr>

<td class="td_ci_col1">Preview/Output Non-Print Recipients:</td>

<td class="td_ci_col2"><asp:ImageButton ID="btn_RunNonPrint" runat="server" ImageUrl="~/Images/pause_24.gif" ToolTip="Click to run Update for this Issue." /></td>

<td class="td_ci_col3">(Pdf,Text,Html)</td>

</tr>

<tr>

<td class="td_ci_col1">Preview/Output Print Recipients:</td>

<td class="td_ci_col2"><asp:ImageButton ID="btn_RunPrint" runat="server" ImageUrl="~/Images/pause_24.gif" ToolTip="Click to run Update for this Issue." /></td>

<td class="td_ci_col3"> </td>

</tr>

<tr>

<td class="td_ci_col1">Preview/Output Premium Recipients:</td>

<td class="td_ci_col2"><asp:ImageButton ID="btn_RunPremium" runat="server" ImageUrl="~/Images/pause_24.gif" ToolTip="Click to run Premiums for this Issue." /></td>

<td class="td_ci_col3" style="text-align: left;"></td>

</tr>

<tr>

<td class="td_ci_col1">Process Renewals:</td>

<td class="td_ci_col2"><asp:ImageButton ID="btn_RunRenewals" runat="server" ImageUrl="~/Images/pause_24.gif" ToolTip="Click to run Renewals for this Issue." Enabled="False" /></td>

<td class="td_ci_col3" style="text-align: left;"></td>

</tr>

<tr>

<td class="td_ci_col1 coming_soon">Process Continuations:</td>

<td class="td_ci_col2"><asp:ImageButton ID="btn_RunContinuations" runat="server" ImageUrl="~/Images/cancl_24.gif" ToolTip="Click to run Update for this Issue." Enabled="False" /></td>

<td class="td_ci_col3" style="text-align: left;">coming soon</td>

</tr>

<tr>

<td class="td_ci_col1 coming_soon">Process Invoices:</td>

<td class="td_ci_col2"><asp:ImageButton ID="btn_RunInvoices" runat="server" ImageUrl="~/Images/cancl_24.gif" ToolTip="Click to run Update for this Issue." Enabled="False" /></td>

<td class="td_ci_col3" style="text-align: left;">coming soon</td>

</tr>

<tr>

<td class="td_ci_col1">Unlock Next Issue:</td>

<td class="td_ci_col2"><asp:ImageButton ID="btn_Unlock" runat="server" ImageUrl="~/Images/pause_24.gif" ToolTip="Click to Unlock Next Issue for Processing." /></td>

<td class="td_ci_col3"> </td>

</tr>

</table>

</asp:Panel>

<center>

<asp:Panel ID="panel_radgrid" Visible="True" style=" margin: 0px auto; text-align: center; width: 80%;" runat="server">

<br />

<center>

<asp:Label ID="lbl_gridheader" runat="server" CssClass="grid_header"></asp:Label>

<telerik:RadGrid ID="RadGrid1" runat="server" Visible="False" Width="80%">

<AlternatingItemStyle Font-Size="8pt" />

<ItemStyle Font-Size="8pt" />

<MasterTableView CommandItemDisplay="Top">

<CommandItemSettings ShowAddNewRecordButton="False" ShowExportToCsvButton="True" />

</MasterTableView>

<HeaderStyle Font-Size="8pt" />

</telerik:RadGrid>

</center>

</asp:Panel>

</center>

<asp:TextBox ID="TextBox1" runat="server" Visible="False"></asp:TextBox>

<div id="basic-modal-content">

</div>

<div id="valerror_email">

</div>

</form>

</body>

</html>

answered on 21 Jan 2013, 03:48 PM

Hello Dana,

I guess my first question is why are you placing the RadAjaxLoadingPanel inside of a table? The RadAjaxManager is the one that will control the position of the loading panel and placing it inside of a table seems unnecessary.

To answer your question why there are duplicates. The reason for the duplicates is because you've set the DefaultLoadingPanelID property of the RadAjaxManager and it will overlay the loading panel over all the controls that are part of the UpdatedControls list. If you want to control which control gets the loading panel, you can remove that property from RadAjaxManager and specifically set it on the UpdatedControl.

I hope that helps.

answered on 22 Jan 2013, 02:08 PM

Hi all,

When many controls are added to the AjaxSettings and you want to use IsSticky="true", you will need to set absolute positioning for the RadAjaxLoadingPanel control i.e:

<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" IsSticky="true" runat="server" style="position:absolute;"> <asp:Image ID="Image1" runat="server" AlternateText="Loading..." ImageUrl="Loading.gif" /> </telerik:RadAjaxLoadingPanel>

One other thing in the code provided I did not see who is calling the centerLoadingPanel() event handler. Please add this line in the RadAjaxManager:

<ClientEvents OnRequestStart="centerLoadingPanel"></ClientEvents>

All the best,
Angel Petrov
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.

answered on 22 Jan 2013, 04:17 PM

telerik-attach-2.jpg

I have taken most of the suggestions and the code is looking cleaner.
Maybe I should just tell you what I would like it to do and you could point me to the code that might make that happen.
Here is the procedure in my code behind that updates most of the controls iin the large white box.

Protected Sub RadAjaxManager1_AjaxRequest(sender As Object, e As AjaxRequestEventArgs)

Load_Status_Panel()

End Sub

My preference for the loadingpanel behavior is as follows:
When any control is clicked that calls the RadAjaxManager1_AjaxRequest I would like to show the LoadingPanel in the center of the page with the greyish overlay covering the whole page... as well as any controls that simply run and ajax call to a particular control.

Please let me know how I can achieve this. If the boss found out how much time I am spending on this he would throw a nutty. ;-)

Dana

answered on 25 Jan 2013, 02:09 PM

CenterLoadingPanel.zip

Hi Dana,

Could you please verify that you have tried to apply our suggestions? Using the information given which is also explained in this help article you should be able to implement the functionality mentioned. To test this I have created a sample project using your code and it it works as expected. Please review it and find the differences in your implementation. Note that you have to change the loading image in the RadAjaxLoadingPanel.

Regards,
Angel Petrov
the Telerik team