Position RadAjaxLoadingPanel in UI for ASP.NET AJAX

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

Position RadAjaxLoadingPanel

12 Answers 106 Views

Ajax

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

bill asked on 23 Jun 2010, 05:56 PM

I have a master page with a table. The table contains four cells. The top left cell contains a RadPanelBar, the top right cell contains the content, the bottem left cell is empty, and the bottom right cell contains navigation buttons. I have an update panel and a loading panel on the master form. I'm trying to get the loading panel to be semi transparent over the bottom right cell only. The transparency is working, but it covers the entire page. I've attached the master page, and the css for the loading grid.

    
            <%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Main.master.vb" Inherits="MassMemberMoveUI.Main" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="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></title>  
        
                <asp:ContentPlaceHolder ID="head" runat="server">  
        
                </asp:ContentPlaceHolder> 
        
                <link href="Main.css" rel="stylesheet" type="text/css" /> 
        
                <link href="MySkin/ComboBox.MySkin.css" rel="stylesheet" type="text/css" /> 
        
                <link href="MySkin/Grid.MySkin.css" rel="Stylesheet" type="text/css" /> 
        
                <link href="MySkin/Ajax.MySkin.css" rel="Stylesheet" type="text/css" /> 
        
                <style type="text/css">  
        
                    .style1  
        
                    {  
        
                        width: 173px;  
        
                    }  
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="MasterForm" runat="server">  
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                </telerik:RadScriptManager> 
        
                <div id="container">  
        
                    <div id="header">  
        
                        <h1> 
        
                            Mass Member Move</h1> 
        
                    </div> 
        
                    <div id="sub_header">  
        
                        ... QNXT Eligibility Transfers</div> 
        
                    <div id="main_content_top">  
        
                    </div> 
        
                    <div id="main_content">  
        
                        <div class="content">  
        
                            <telerik:RadAjaxPanel runat="server" ID="MainAjaxPanel" LoadingPanelID="MainLoadingPanel">  
        
                                <table width="700px">  
        
                                    <tr> 
        
                                        <td class="style1">  
        
                                            <div style="position: absolute; width: 162px; height: 400px; z-index: 101; background-color: White;  
        
                                                filter: alpha(opacity=0); -moz-opacity: 0.0; opacity: 0.0;"> 
        
                                            </div> 
        
                                            <telerik:RadPanelBar ID="ProgressPanelBar" runat="server" Width="162px" Height="400px" 
        
                                                DataSourceID="SiteMapDataSource1">  
        
                                            </telerik:RadPanelBar> 
        
                                            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /> 
        
                                        </td> 
        
                                        <td> 
        
                                            <div style="height: 400px; border: solid 1px black;">  
        
                                                <asp:ContentPlaceHolder ID="contentplaceholder1" runat="server">  
        
                                                </asp:ContentPlaceHolder> 
        
                                            </div> 
        
                                        </td> 
        
                                    </tr> 
        
                                    <tr> 
        
                                        <td class="style1">  
        
                                        </td> 
        
                                        <td> 
        
                                            <telerik:RadAjaxLoadingPanel ID="MainLoadingPanel" runat="server" IsSticky="true" 
        
                                                EnableEmbeddedSkins="false" Skin="MySkin">  
        
                                            </telerik:RadAjaxLoadingPanel> 
        
                                            <center> 
        
                                                <div style="height: 100px">  
        
                                                    <asp:ImageButton ID="PrevButton" runat="server" ImageUrl="~/Images/LeftArrow.bmp" 
        
                                                        ToolTip="Previous Page" />&nbsp;  
        
                                                    <asp:ImageButton ID="NextButton" runat="server" ImageUrl="~/Images/RightArrow.bmp" 
        
                                                        ToolTip="Next Page" /> 
        
                                                    <p /> 
        
                                                    <asp:Label ID="ErrorLabel" runat="server" Visible="false" ForeColor="Red"></asp:Label> 
        
                                                </div> 
        
                                            </center> 
        
                                        </td> 
        
                                    </tr> 
        
                                </table> 
        
                            </telerik:RadAjaxPanel> 
        
                        </div> 
        
                    </div> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

    
            /* Telerik RadAjaxLoadingPanel Default Skin */ 
        
            /* 
        
                         <div style="position: absolute; left: 173px; top: 400px; width: 538px; height: 100px; 
        
                                    background-color: Gray; filter: alpha(opacity=60); -moz-opacity: 0.6; 
        
                                    opacity: 0.6;"> 
        
                                </div> 
        
            */ 
        
            .RadAjax_MySkin .raDiv  
        
            {  
        
                /*background-image:url('Common/loading.gif');*/ 
        
                position: absolute;  
        
                left: 173px;  
        
                top: 400px;  
        
                width: 538px;  
        
                height: 100px;  
        
            }  
        
            .RadAjax_MySkin .raColor  
        
            {  
        
                background-color:#fff;  
        
            }  
        
            .RadAjax_MySkin .raTransp  
        
            {  
        
                opacity:0.6;  
        
                -moz-opacity:0.6;  
        
                filter:alpha(opacity=60);  
        
            }

12 Answers, 1 is accepted

answered on 24 Jun 2010, 09:59 AM

Hi Bill,

You can set the IsSticky property of the RadAjaxLoadingPanel to true and it will appear where you have set it in the WebForm. You can find more information here.

And for additional solutions for positioning the RadAjaxLoadingPanel on the page, you can check the below articles:
http://www.telerik.com/help/aspnet-ajax/ajxshowloadingpanelnexttoajaxinitiator.html
http://www.telerik.com/help/aspnet-ajax/ajxcenterloadingpanel.html

All the best,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Accepted

answered on 20 Jul 2010, 10:32 AM

teleriksample.zip

Hello Bill,

Attached to this message is a modified project which hanldes the desired functionality. Please give it a try and let me know if it works as expected or if I am leaving something out.

Greetings,
Pavlina
the Telerik team