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

Ajax Loading panel not showing over Rad Window

1 Answer 180 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Meenakshi Nagalingam
Top achievements
Rank 1
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.

1 Answer, 1 is accepted

Sort by
0
Meenakshi Nagalingam
Top achievements
Rank 1
answered on 09 Oct 2011, 03:44 PM
Hi,

Its working now. I have mistakenly given the wrong Default Loading panel Id 
Ignore this post.

Thanks,
Meenakshi.
Tags
Ajax
Asked by
Meenakshi Nagalingam
Top achievements
Rank 1
Answers by
Meenakshi Nagalingam
Top achievements
Rank 1
Share this question
or