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> </td>
</tr>
<tr>
<td> </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>
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> </td>
</tr>
<tr>
<td> </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
0
Hello Deepak,
Please try to add the following settings into the LoadingPanel tag and disable the client site script:
All the best,
Maria Ilieva
the Telerik team
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