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

[Solved] Ajax Loading panel not showing over Rad Window

1 Answer 264 Views

Ajax

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

Meenakshi Nagalingam asked on 09 Oct 2011, 03:27 PM

Hi,

I have changed the display of ajax loading panel at the center of the page instead showing over the updated control as described in this help link
http://www.telerik.com/help/aspnet-ajax/ajax-center-loadingpanel.html

It works fine for all the pages except the Rad Window.
Below is the sample code i tried for your reference,

Markup of the Rad Window Popup page:

<asp:Content ID="content" ContentPlaceHolderID="PopupContent" Runat="Server">

<script src="../Scripts/Common.js" type="text/javascript" language="javascript"></script>

<h1>TestPage</h1>

<asp:Panel ID="pnlTest" runat="server">

<asp:TextBox ID="txtTest" runat="server"></asp:TextBox>

<asp:Button ID="btnTest" runat="server" OnClick="btnTest_Click" />

</asp:Panel>

<telerik:RadAjaxManagerProxy ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="btnTest">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="txtTest" />

</UpdatedControls>

</telerik:AjaxSetting>

<%-- <telerik:AjaxSetting AjaxControlID="btnTest">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlTest" />

</UpdatedControls>

</telerik:AjaxSetting> --%>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

</asp:Content>

Im having the script to center the loading panel and the ajax loading panel at the master page,

Master Page:

<telerik:RadScriptBlock runat="server" ID="RadScriptBlock">

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

function OnRequestStart(sender, args)

{

args.set_enableAjax(true);

centerAjaxLoadingPanel();

}

// Invoke the centerElementOnScreen method to center the ajax loading panel in the screen

function centerAjaxLoadingPanel() {

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

}

// Center the ajax loading panel in the screen

function centerElementOnScreen(element) {

var scrollTop = document.body.scrollTop;

var scrollLeft = document.body.scrollLeft;

var viewPortHeight = document.body.clientHeight;

var viewPortWidth = document.body.clientWidth;

// Check for BackCompat or CSS1Compat ( to display correctly in the older versions of Internet explorer)

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

viewPortHeight = document.documentElement.clientHeight;

viewPortWidth = document.documentElement.clientWidth;

}

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

<telerik:RadScriptManager ID="PopupMasterScriptManager" runat="server" AsyncPostBackTimeout="300" />

<telerik:RadAjaxManager ID="RadAjaxManagerPopup" runat="server" DefaultLoadingPanelID="AjaxLoadingPanel">

<ClientEvents OnRequestStart="OnRequestStart" OnResponseEnd="OnResponseEnd" />

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="PopupAjaxLoadingPanel" runat="server" Height="60px" Width="130px" IsSticky="true" Transparency="1">

<asp:Image ID="imgPopupLoadingPanel" runat="server" AlternateText="Loading..." ImageUrl="~/Images/loading.gif" />

</telerik:RadAjaxLoadingPanel>

The control is getting updated but im not getting the ajax loading image.
I got that default z-index for Ajax loading panel is 90000 and for Rad Window is 3000.
Even i tried to set the the z-index explicitly for Ajax loading panel and Rad Window.

Please help me on this.

Thanks,
Meenakshi.

[Solved] Ajax Loading panel not showing over Rad Window

1 Answer, 1 is accepted