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

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

1 Answer 25 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Deepak
Top achievements
Rank 1
Deepak asked on 27 Jul 2010, 07:32 PM
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>

1 Answer, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 30 Jul 2010, 02:39 PM
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
Tags
Ajax
Asked by
Deepak
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
Share this question
or