Position RadAjaxLoadingPanel

13 posts, 1 answers
  1. bill
    bill avatar
    20 posts
    Member since:
    Sep 2008

    Posted 23 Jun 2010 Link to this post

    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" /> 
                                            </> 
                                            <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');*/ 
        positionabsolute;  
        left173px;  
        top400px;  
        width538px;  
        height100px;  
    }  
     
    .RadAjax_MySkin .raColor  
    {  
        background-color:#fff;  
    }  
     
    .RadAjax_MySkin .raTransp  
    {  
        opacity:0.6;  
        -moz-opacity:0.6;  
        filter:alpha(opacity=60);  
  2. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 24 Jun 2010 Link to this post

    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
  3. bill
    bill avatar
    20 posts
    Member since:
    Sep 2008

    Posted 30 Jun 2010 Link to this post

    I have the IsSticky property set to true.
  4. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 01 Jul 2010 Link to this post

    Hello Bill,

    Please review this help topic on how you could show/hide RadAjaxLoadingPanel explicitly and try it in your case.

    Let me know if you find any difficulties or any issues arise.

    Regards,
    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
  5. bill
    bill avatar
    20 posts
    Member since:
    Sep 2008

    Posted 01 Jul 2010 Link to this post

    Currently I'm using a RadAjaxPanel on the master page so I don't have to explicity write all the ajax wiring required by the radajaxmanager.  Is there a way to explitly show the update panel, with out using a ajax manager?
  6. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 02 Jul 2010 Link to this post

    Hi bill,

    To achieve the desired functionality using RadAjaxPanel instead of RadAjaxManager, you need to handle on OnRequestStart / OnResponseEnd client side events of RadAjaxPanel and follow the instructions from the help topic which was linked to the previous post.

    Regards,
    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
  7. bill
    bill avatar
    20 posts
    Member since:
    Sep 2008

    Posted 06 Jul 2010 Link to this post

    I added the OnRequestStart and OnResponseEnd event handlers to the RadAjaxPanel (intellisense didn't find them).  After adding them, it doesn't appear the events are firing.  I added an alert box in the RequestStart method to determine if the method was being called, and the alert box never pops up.
  8. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 06 Jul 2010 Link to this post

    Hello Bill,

    Could you please send us a runnable sample illustrating your scenario and the issues you are facing? You can try opening a formal support ticket where you can attach the project files. I could then debug it locally and find a proper resolution for you. Otherwise it would hard to determine the source of the problem based on the provided information.

    Regards,
    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
  9. bill
    bill avatar
    20 posts
    Member since:
    Sep 2008

    Posted 06 Jul 2010 Link to this post

    I created an example, and tried to submit a support ticket, but I recieve an error indicating my support package is not active.  If there is another way to send you my project, I can do that, otherwise I can post all the code.
  10. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 09 Jul 2010 Link to this post

    Hi Bill,

    You can try to upload the project on public site and send us the transfer link.

    Greetings,
    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
  11. bill
    bill avatar
    20 posts
    Member since:
    Sep 2008
  12. Answer
    Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 20 Jul 2010 Link to this post

    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
    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
  13. bill
    bill avatar
    20 posts
    Member since:
    Sep 2008

    Posted 09 Aug 2010 Link to this post

    Worked like a charm, thanks for your help.
Back to Top