Ajaxloading is coming in center of textbox instead of center of page when used with master page

2 posts, 0 answers
  1. Deepak
    Deepak avatar
    15 posts
    Member since:
    Jun 2010

    Posted 27 Jul 2010 Link to this post

    I am using RadAjaxManager in my master page and RadAjaxManagerProxy in my child page.
    The masterpage has a ajax loading panel which i want to  show in the center of the screen.
    so I used this example.
    http://www.telerik.com/help/aspnet-ajax/ajxcenterloadingpanel.html

    In the child page I have a textbox which does postback on text changed.
    When I run the page the loading panels shows up in  the center of the textbox instead in the center of page.
    I also attached the screen shot of this.

    Could any one help me out here.



    This is the code for my master page.

    <%@ Master Language="VB" CodeFile="SiteMaster.master.vb" Inherits="SiteMaster" %>

    <%@ Register TagPrefix="GD" TagName="Footer" Src="App_controls/Footer.ascx" %>
    <%@ Register TagPrefix="GD" TagName="TopMenu" Src="App_controls/App_Controls_TopMenu.ascx" %>
    <!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>CEMG Property Management System</title>
        <link href="CSS/CEMG.css" rel="stylesheet" type="text/css" />
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True">
        </telerik:RadScriptManager>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
        </telerik:RadStyleSheetManager>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Office2007" />
        <asp:Label ID="lblAlert" runat="server"></asp:Label>
        <div>
            <GD:TopMenu ID="TopMenu1" runat="server"></GD:TopMenu>
            <br />
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
                <!-- Page-specific content will go here... -->
            </asp:ContentPlaceHolder>
            <asp:Label ID="lblPropertyID" runat="server" Visible="False"></asp:Label>
        </div>
        <GD:Footer ID="Footer" runat="server"></GD:Footer>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
            <ClientEvents OnRequestStart="CenterLoadingPanel"></ClientEvents>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"
            Skin="Outlook">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function CenterLoadingPanel() {
                    centerElementOnScreen($get("<%= RadAjaxLoadingPanel1.ClientID %>"));
                }
                function centerElementOnScreen(element) {
                    debugger;
                    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>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
        </asp:ContentPlaceHolder>
        </form>
    </body>
    </html>

    ===================================================
    This is the code for my child page

    <%@ Page Title="" Language="VB" MasterPageFile="~/SiteMaster.master" AutoEventWireup="false" CodeFile="ManagementDashboard.aspx.vb" Inherits="ManagementDashboard" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
        <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
            <Scripts>
                <asp:ScriptReference Path="~/JS/jquery-1.4.2.min.js" />
            </Scripts>
        </asp:ScriptManagerProxy>
        <telerik:RadScriptBlock ID="scbScripts" runat="server">  
            <script type="text/javascript">
                function populateSelectedOwners(sender, args) {
                    var textBox;
                    textBox = $find("<%= tbOwners.ClientID %>");
                    textBox.set_value(args.get_argument());

                    return false;
                }
                function populateSelectedInvestors(sender, args) {
                    var textBox;
                    textBox = $find("<%= tbInvestors.ClientID %>");
                    textBox.set_value(args.get_argument());

                    return false;
                }
                function populateSelectedPartners(sender, args) {
                    var textBox;
                    textBox = $find("<%= tbPartners.ClientID %>");
                    textBox.set_value(args.get_argument());

                    return false;
                }
            </script>
        </telerik:RadScriptBlock>
        <table width="99%" border="0" align="center" cellpadding="0" cellspacing="3"  class="PropertyInfoTable" style="background-color:#ffffff;" >
          <tr>
            <td class="tableBorder" align="center">Custom Filters</td>
          </tr>
          <tr>
            <td align="left" valign="top"><table width="100%" border="0" cellspacing="5" cellpadding="0">
              <tr>
                <td width="150px" nowrap="nowrap" class="SmallTxtBold" valign="middle" >Owner:</td>
                <td align="left" valign="middle" >
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td valign="middle"><telerik:RadTextBox ID="tbOwners" runat="server"
                                    Skin="Office2007" Width="300px" AutoPostBack="True"> </telerik:RadTextBox></td>
                               <td valign="middle"><img id="imgOwners" onclick="window.radopen(null, 'tbOwnersDialog');" src="images/search_icon.gif" align="absbottom" runat="server" /> </td>
                            <td valign="middle" width="300px" nowrap="nowrap"><asp:Label ID="lblOwnerStatus" runat="server"></asp:Label><asp:Label ID="lblOwnerID" runat="server" Visible="false"></asp:Label></td>
                  </tr>
                </table>
              </tr>
              <tr>
                <td  nowrap="nowrap" class="SmallTxtBold" valign="middle" >Investor:</td>
                <td align="left" valign="middle"><table border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td valign="middle"><telerik:RadTextBox ID="tbInvestors" runat="server" Skin="Office2007" AutoPostBack="True"
                            Width="300px"> </telerik:RadTextBox></td>
                    <td valign="middle"><img id="imgInvestors" onclick="window.radopen(null, 'tbInvestorsDialog');" src="images/search_icon.gif" align="absbottom" runat="server" /> </td>
                    <td valign="middle" width="300px" nowrap="nowrap"><asp:Label ID="lblInvestorStatus" runat="server"></asp:Label>
                        <asp:Label ID="lblInvestorID" runat="server" Visible="false"></asp:Label></td>
                  </tr>
                </table></td>
              </tr>
              <tr>
                <td nowrap="nowrap" class="SmallTxtBold" valign="middle" >Partner:</td>
                <td align="left" valign="middle"><table border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td valign="middle"><telerik:RadTextBox ID="tbPartners" runat="server" Skin="Office2007" AutoPostBack="True"
                            Width="300px"> </telerik:RadTextBox></td>
                    <td valign="middle"><img id="imgPartners" onclick="window.radopen(null, 'tbPartnersDialog');" src="images/search_icon.gif" align="absbottom" runat="server" /> </td>
                    <td valign="middle" width="300px" nowrap="nowrap"><asp:Label ID="lblPartnerStatus" runat="server"></asp:Label>
                        <asp:Label ID="lblPartnerID" runat="server" Visible="false"></asp:Label></td>
                  </tr>
                </table></td>
              </tr>         
            </table></td>
          </tr>
          <tr>
            <td height="30" align="right" valign="middle" style="border:1px solid #000000;background-color:#A4C1EC;" ><table width="520" border="0" cellspacing="2" cellpadding="0">
          <tr>
            <td width="110"><asp:Button ID="btnCustomize" runat="server" Width="100" Text="Customize" /></td>
            <td width="110"><asp:Button ID="btnSaveView" runat="server" Width="100" Text="Save New View" /></td>
            <td width="110"><asp:Button ID="btnDeleteView" runat="server" Width="100" Text="Delete View" /></td>
            <td width="80" align="right" nowrap="nowrap" class="SmallTxtBold">Change View:
              </td>
            <td width="110"><asp:DropDownList ID="ddlViewList" ClientIDMode="Static"
                    runat="server" Width="110" AutoPostBack="True"> </asp:DropDownList>
            </td>
          </tr>
        </table></td>
          </tr>
          <tr>
            <td align="left">
             <telerik:RadDockLayout ID="RadDockLayout1" runat="server" Skin="Outlook">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td align="left" valign="top">
                            <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="350" Style="margin-right: 2px;overflow:hidden;"
                                Width="98%"  Orientation="Horizontal" >
                            </telerik:RadDockZone>
                        </td>
                        <td width="6"><img src="images/spacer.gif" width="6" height="1" /></td>
                        <td align="left" valign="top" >
                            <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="350" Style="margin-right: 2px;overflow:hidden;"
                                Width="98%" Orientation="Horizontal" >                               
                            </telerik:RadDockZone>
                        </td>
                    </tr>
                </table>
             </telerik:RadDockLayout>
             </td>
          </tr>
          <tr>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
          </tr>
        </table>
        <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="tbInvestors">
                     <UpdatedControls>                  
                         <telerik:AjaxUpdatedControl ControlID="tbInvestors" />   
                         <telerik:AjaxUpdatedControl ControlID="lblInvestorStatus" />
                         <telerik:AjaxUpdatedControl ControlID="lblInvestorID" />                
                     </UpdatedControls>
                 </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManagerProxy>
        <telerik:RadWindowManager ID="RadWindowManager1" runat="server" VisibleStatusbar="False"
            Behaviors="Default" InitialBehaviors="None" Left=""
            Skin="Outlook" style="display: none;" Top="" >
            <Windows>
                <telerik:RadWindow  id="tbOwnersDialog" Runat="server"
                    OnClientClose="populateSelectedOwners" Width="400px" Height="300px"
                    Title="Select Owners" NavigateUrl="Windows/SelectOwners.aspx" />
                <telerik:RadWindow  id="tbInvestorsDialog" Runat="server"
                    OnClientClose="populateSelectedInvestors" Width="400px" Height="300px"
                    Title="Select Investors"    NavigateUrl="Windows/SelectPartners.aspx" />            
                <telerik:RadWindow  id="tbPartnersDialog" Runat="server"
                    OnClientClose="populateSelectedPartners" Width="400px" Height="300px"
                    Title="Select Partners"    NavigateUrl="Windows/SelectPartners.aspx?InvestorTypeID=2" />
            </Windows>
        </telerik:RadWindowManager>
       
    </asp:Content>
    <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
    </asp:Content>

  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 30 Jul 2010 Link to this post

    Hello Deepak,

    Please try to add the following settings into the LoadingPanel tag and disable the client site script:

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

    Skin="Outlook" IsSticky="true" style="top:0; left:0; height:100%; width: 100%">

    </telerik:RadAjaxLoadingPanel>



    All the best,
    Maria Ilieva
    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
Back to Top