Hello, i have my master page set up like so:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</ContentTemplate>
<triggers>
</triggers>
</asp:UpdatePanel>
- But in one of my content pages, i have a radscheduler, which will not work properly within an updatepanel, because it needs a full postback for most of the events i need, so I added the following to the code behind in that page, to allow for a full postback with this control (this approach has worked with the asp.net upload control):
<%@ MasterType virtualPath="~/Default.master"%>, this line is in the source html, so i can access with master page below:
protected void Page_Init(object sender, EventArgs e)
{
//Scheduler needs a full page postback, need to add trigger.
PostBackTrigger trigger = new PostBackTrigger();
trigger.ControlID = RadScheduler1.UniqueID;
Master.MasterUpdatePanel.Triggers.Add(trigger);
}
- when i add this, i get the following error:
- My question is, is there a way to get my scenario above to work? Having a RadScheduler in a content page, that is wrapped in an update panel within the master page, and allowing the full postback for my scheduler??
- I know i could just create another content template, not within an update panel, and use that for this page, but there is a lot of other layout in the master page not shown above, that is preventing this.
Thank you
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</ContentTemplate>
<triggers>
</triggers>
</asp:UpdatePanel>
- But in one of my content pages, i have a radscheduler, which will not work properly within an updatepanel, because it needs a full postback for most of the events i need, so I added the following to the code behind in that page, to allow for a full postback with this control (this approach has worked with the asp.net upload control):
<%@ MasterType virtualPath="~/Default.master"%>, this line is in the source html, so i can access with master page below:
protected void Page_Init(object sender, EventArgs e)
{
//Scheduler needs a full page postback, need to add trigger.
PostBackTrigger trigger = new PostBackTrigger();
trigger.ControlID = RadScheduler1.UniqueID;
Master.MasterUpdatePanel.Triggers.Add(trigger);
}
- when i add this, i get the following error:
Control with ID 'RadScheduler1' cannot be registered through both RegisterAsyncPostBackControl and RegisterPostBackControl. This can happen if you have conflicting triggers associated with the target control.
- My question is, is there a way to get my scenario above to work? Having a RadScheduler in a content page, that is wrapped in an update panel within the master page, and allowing the full postback for my scheduler??
- I know i could just create another content template, not within an update panel, and use that for this page, but there is a lot of other layout in the master page not shown above, that is preventing this.
Thank you
1 Answer, 1 is accepted
0
Joe
Top achievements
Rank 1
Rank 1
answered on 28 Aug 2008, 03:19 PM
Well, in case you need it, here is my whole master page, and the content page in question, the source, maybe the ajaxmanager already registers something??:
Master:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Default.master.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" TagPrefix="asp" Namespace="AjaxControlToolkit" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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>[Your Company Name Here] Intranet</title>
<link href="Main.css" rel="stylesheet" type="text/css" />
<script src="JS/common.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:SiteMapDataSource ID="SiteMapDataSource1" ShowStartingNode="false" runat="server" />
<div id="wrapper">
<div id="header">
<img id="logo" src="images/Mouse_QuarterSize.jpg" alt="You Logo Here" />
<div id="header_msg_status">
<h1>[Your Company Name Here] Intranet</h1>
<p><asp:SiteMapPath ID="SiteMapPath1" PathSeparator=" » " runat="server">
<RootNodeTemplate></RootNodeTemplate>
</asp:SiteMapPath></p>
</div>
<div id="header_links">
<h3>
<asp:Label ID="lbl_User" runat="server" Text=""></asp:Label>
</h3>
<p>
<asp:LinkButton ID="btn_AccountSettings" runat="server"
CausesValidation="false" onclick="btn_AccountSettings_Click">Account Settings</asp:LinkButton>
| <asp:LinkButton ID="btn_Logout" runat="server" CausesValidation="false" onclick="btn_Logout_Click">Logout</asp:LinkButton></p>
</div>
</div>
<div id="main_content">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="nav">
<telerik:RadMenu ID="RadMenu_Events" runat="server" CausesValidation="false" OnItemClick="MenuClickHandler" Skin="Web20">
<Items>
<telerik:RadMenuItem ID="rad_New" runat="server" ImageUrl="images/Panelbar/Skins/Web20/icons/new.gif" Text="New" Value="New"></telerik:RadMenuItem>
<telerik:RadMenuItem ID="rad_Edit" runat="server" ImageUrl="images/Panelbar/Skins/Web20/icons/edit.gif" Text="Edit" Value="Edit"></telerik:RadMenuItem>
<telerik:RadMenuItem ID="rad_Save" runat="server" onclick="return FireValidation();" ImageUrl="images/Panelbar/Skins/Web20/icons/save_3.gif" Text="Save" Value="Save"></telerik:RadMenuItem>
<telerik:RadMenuItem ID="rad_Print" runat="server" onclick="Print();" ImageUrl="images/Panelbar/Skins/Web20/icons/print_2.gif" Text="Print" Value="Print"></telerik:RadMenuItem>
<telerik:RadMenuItem ID="rad_Delete" runat="server" ImageUrl="images/Panelbar/Skins/Web20/icons/delete.gif" Text="Delete" Value="Delete"></telerik:RadMenuItem>
<telerik:RadMenuItem ID="rad_Cancel" runat="server" ImageUrl="images/Panelbar/Skins/Web20/icons/cancel.gif" Text="Cancel" Value="Cancel"></telerik:RadMenuItem>
</Items>
</telerik:RadMenu>
</div>
<div id="left_column">
<telerik:RadPanelbar ID="RadPanelbarLeftNav" DataSourceID="SiteMapDataSource1"
runat="server" Skin="Web20" CausesValidation="false" Width="210px"
onitemdatabound="RadPanelbarLeftNav_ItemDataBound"></telerik:RadPanelbar>
</div>
<asp:Label ID="lbl_Message" runat="server" CssClass="ErrorMessage" Text=""></asp:Label>
<!--
AJAX Update Panel gets rid of the page flicker that occurs on normal post backs,
and only makes content within the update panel Post Back (partial postback).
Having the update panel around where it is right now screws up all the divs,
and the overlay indicator, but it allows the menu buttons to be in the Update Panel,
is that worth it? maybe, for now indicator works, but not the div overlay.
-->
<div id="right_column">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</ContentTemplate>
<triggers>
</triggers>
</asp:UpdatePanel>
</div>
<div id="footer">
</div>
<!-- Behavior ID is ID for client side (vs regular ID for server side) -->
<asp:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server" TargetControlID="UpdatePanel1">
<Animations>
<OnUpdating>
<Parallel duration="0">
<ScriptAction Script="$get('updateProgressDiv').style.display = '';" />
</Parallel>
</OnUpdating>
<OnUpdated>
<Parallel duration="0">
<ScriptAction Script="$get('updateProgressDiv').style.display = 'none';" />
</Parallel>
</OnUpdated>
</Animations>
</asp:UpdatePanelAnimationExtender>
<div id="updateProgressDiv" class="updateProgress" style="display:none">
<div align="center" style="margin-top:13px;">
<img alt="" src="images/indicator.gif" />
<span class="updateProgressMessage">Loading ...</span>
</div>
</div>
</div> <!--end wrapper-->
<script type="text/javascript" language="javascript">
var _updateProgressDiv;
var _backgroundDiv;
var _rightDiv;
function pageLoad(sender, args){
// register for our events
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
// get the updateprogressdiv
_updateProgressDiv = $get('updateProgressDiv');
// fetch the right content column
_rightDiv = document.getElementById('right_column');
// create the div that we will position over the column during postbacks
_backgroundDiv = document.createElement('div');
_backgroundDiv.style.display = 'none';
_backgroundDiv.style.zIndex = 10000;
_backgroundDiv.className = 'background';
// add the element to the DOM
_rightDiv.parentNode.appendChild(_backgroundDiv);
}
function beginRequest(sender, args){
// make it visible
_updateProgressDiv.style.display = '';
_backgroundDiv.style.display = ''; ////////////
// get the bounds of both the right column div and the progress div
var columnBounds = Sys.UI.DomElement.getBounds(_rightDiv);
if (columnBounds.height < 25)
{ //if it is the non_ajax column, get those bounds, DONT LIKE HARDCODING 25 ABOVE
_rightDiv = document.getElementById('right_column_non_ajax');
columnBounds = Sys.UI.DomElement.getBounds(_rightDiv);
}
var updateProgressDivBounds = Sys.UI.DomElement.getBounds(_updateProgressDiv);
// center of right column div
var x = columnBounds.x + Math.round(columnBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
var y = columnBounds.y + Math.round(columnBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);
// set the dimensions of the background div to the same as the right column
_backgroundDiv.style.width = columnBounds.width + 'px'; ///////////
_backgroundDiv.style.height = columnBounds.height + 'px'; //////////
// set the progress element to this position
Sys.UI.DomElement.setLocation(_updateProgressDiv, x, y);
// place the div over the right column div
Sys.UI.DomElement.setLocation(_backgroundDiv, columnBounds.x, columnBounds.y); ///////////
}
function endRequest(sender, args) {
// make it invisible
_updateProgressDiv.style.display = 'none';
_backgroundDiv.style.display = 'none'; //////////////
}
function FireValidation()
{
if (typeof(Page_ClientValidate) == 'function')
{
if (Page_ClientValidate())
{
return true;
}
return false;
}
return false;
}
function Print()
{
window.print();
}
</script>
</form>
</body>
</html>
Content:
<%@ Page Language="C#" MasterPageFile="~/Default.master" AutoEventWireup="true" CodeFile="UnavailableHours.aspx.cs" Inherits="UnavailableHours" Title="[Your Company Name Here] - Unavalaible Hours" %>
<%@ Register Assembly="AjaxControlToolkit" TagPrefix="ajx" Namespace="AjaxControlToolkit" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ MasterType virtualPath="~/Default.master"%>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<h2>Unavailable Hours Request Form</h2>
<div id="form">
<div class="left_small_form">
<p>Date Submitted:</p>
</div>
<div class="right_small_form">
<asp:Label ID="txt_DateRequested" runat="server" Text="" Width="240px"></asp:Label>
</div>
<div class="left_small_form">
<p>Name:</p>
</div>
<div class="right_small_form">
<asp:Label ID="txt_FullName" runat="server" Text="" Width="240px"></asp:Label>
</div>
<div class="left_small_form">
<p>Employee Number:</p>
</div>
<div class="right_small_form">
<asp:Label ID="txt_EmployeeID" runat="server" Text="" Width="240px"></asp:Label>
</div>
<div class="left_small_form">
<p>Phone number for questions:</p>
</div>
<div class="right_small_form">
<asp:TextBox ID="txt_Phone" runat="server" Width="240px" Height="20.5px"></asp:TextBox>
</div>
<div class="full_column_form">
<p> </p>
</div>
<div class="full_column_form">
<telerik:RadScheduler runat="server" ID="RadScheduler1" Width="725px" Height="600px" StartEditingInAdvancedForm="false"
Skin="Office2007" DataKeyField="UnavailableHoursID" DataStartField="UnavailableBegins"
DataEndField="UnavailableEnds" DataSubjectField="Description" SelectedView="DayView"
DayStartTime="07:00:00" DayEndTime="21:00:00"
OnFormCreating="RadScheduler1_FormCreating"
OnAppointmentDelete="RadScheduler1_AppointmentDelete"
OnAppointmentUpdate="RadScheduler1_AppointmentUpdate">
</telerik:RadScheduler>
</div>
<div class="left_small_form">
<p></p>
</div>
<div class="right_small_form">
<asp:Button ID="btn_Submit" Width="100px" runat="server" Text="Submit" OnClick="btn_Submit_Click" />
</div>
<asp:RegularExpressionValidator ID="val_PhoneFormat" Display="None" runat="server" ControlToValidate="txt_Phone" ErrorMessage="<B>Invalid Phone ###-###-####.</B>" ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"></asp:RegularExpressionValidator>
<ajx:validatorCalloutExtender id="vce_PhoneFormat" runat="server" HighlightCssClass="ValidatorCallout" TargetControlID="val_PhoneFormat"></ajx:validatorCalloutExtender>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadScheduler1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadScheduler1" />
<telerik:AjaxUpdatedControl ControlID="RadDock1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="RadDock1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadScheduler1" />
<telerik:AjaxUpdatedControl ControlID="RadDock1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadScriptBlock runat="server" ID="RadScriptBlock2">
<script type="text/javascript">
function openEditForm()
{
var dock = $find("<%=RadDock1.ClientID%>");
// Center the RadDock on the screen
var viewPort = $telerik.getViewPortSize();
var xPos = Math.round((viewPort.width - parseInt(dock.get_width())) / 2);
var yPos = Math.round((viewPort.height - parseInt(dock.get_height())) / 2);
$telerik.setLocation(dock.get_element(), { x: xPos, y: yPos });
dock.set_closed(false);
var descriptionTextBox = $get('<%= txt_DescriptionText.ClientID %>');
descriptionTextBox.focus();
Sys.Application.remove_load(openEditForm);
}
function hideForm()
{
var dock = $find("<%=RadDock1.ClientID%>");
dock.set_closed(true);
}
</script>
</telerik:RadScriptBlock>
<telerik:RadDock runat="server" ID="RadDock1" Skin="Office2007"
Width="550px" Height="350px" Closed="true" Style="z-index: 1000;"
Title="Unavailable Hours Entry" EnableDrag="false">
<Commands>
<telerik:DockCloseCommand />
</Commands>
<ContentTemplate>
<br />
<br />
<table>
<tr>
<td><p>Description: </p></td>
<td><asp:TextBox runat="server" ID="txt_DescriptionText" Width="240px" Height="20.5px"></asp:TextBox>
<asp:RequiredFieldValidator ID="req_Desc" runat="server" ControlToValidate="txt_DescriptionText" Display="None" ErrorMessage="<B>Description is required.</B>"></asp:RequiredFieldValidator>
<ajx:validatorCalloutExtender id="vce_Desc" runat="server" HighlightCssClass="ValidatorCallout" TargetControlID="req_Desc"></ajx:validatorCalloutExtender> </td>
</tr>
<tr>
<td><p>Starts at: </p></td>
<td><telerik:RadDateTimePicker ID="rad_StartTime" runat="server" Skin="Office2007"
SharedCalendarID="SharedCalendar" SharedTimeViewID="SharedTimeView">
</telerik:RadDateTimePicker>
<asp:RequiredFieldValidator Runat="server" ID="req_Start" Display="None" ControlToValidate="rad_StartTime" ErrorMessage="<B>Start Time is required.</B>" />
<ajx:validatorCalloutExtender id="vce_Start" runat="server" HighlightCssClass="ValidatorCallout" TargetControlID="req_Start"></ajx:validatorCalloutExtender> </td>
</tr>
<tr>
<td><p>Ends at: </p></td>
<td><telerik:RadDateTimePicker ID="rad_EndTime" runat="server" Skin="Office2007"
SharedCalendarID="SharedCalendar" SharedTimeViewID="SharedTimeView">
</telerik:RadDateTimePicker>
<asp:RequiredFieldValidator Runat="server" ID="req_End" Display="None" ControlToValidate="rad_EndTime" ErrorMessage="<B>End Time is required.</B>" />
<ajx:validatorCalloutExtender id="vce_End" runat="server" HighlightCssClass="ValidatorCallout" TargetControlID="req_End"></ajx:validatorCalloutExtender> </td>
</tr>
<tr>
<td><p>Comments: </p></td>
<td><asp:TextBox ID="txt_Comments" runat="server" Width="240px" Height="80px" TextMode="MultiLine"></asp:TextBox></td>
</tr>
<tr>
<td><p></p></td>
<td><asp:Button runat="server" ID="SubmitButton" Text="Update" OnClick="Dock_SubmitButton_Click" />
<button onclick="hideForm();" type="button" style="margin-right:20px;">Cancel</button></td>
</tr>
</table>
<telerik:RadTimeView ID="SharedTimeView" runat="server" Skin="Office2007">
</telerik:RadTimeView>
<telerik:RadCalendar ID="SharedCalendar" runat="server" Skin="Office2007" EnableMonthYearFastNavigation="False"
EnableMultiSelect="False" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False">
</telerik:RadCalendar>
</ContentTemplate>
</telerik:RadDock>
</div>
</asp:Content>
Master:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Default.master.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" TagPrefix="asp" Namespace="AjaxControlToolkit" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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>[Your Company Name Here] Intranet</title>
<link href="Main.css" rel="stylesheet" type="text/css" />
<script src="JS/common.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:SiteMapDataSource ID="SiteMapDataSource1" ShowStartingNode="false" runat="server" />
<div id="wrapper">
<div id="header">
<img id="logo" src="images/Mouse_QuarterSize.jpg" alt="You Logo Here" />
<div id="header_msg_status">
<h1>[Your Company Name Here] Intranet</h1>
<p><asp:SiteMapPath ID="SiteMapPath1" PathSeparator=" » " runat="server">
<RootNodeTemplate></RootNodeTemplate>
</asp:SiteMapPath></p>
</div>
<div id="header_links">
<h3>
<asp:Label ID="lbl_User" runat="server" Text=""></asp:Label>
</h3>
<p>
<asp:LinkButton ID="btn_AccountSettings" runat="server"
CausesValidation="false" onclick="btn_AccountSettings_Click">Account Settings</asp:LinkButton>
| <asp:LinkButton ID="btn_Logout" runat="server" CausesValidation="false" onclick="btn_Logout_Click">Logout</asp:LinkButton></p>
</div>
</div>
<div id="main_content">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="nav">
<telerik:RadMenu ID="RadMenu_Events" runat="server" CausesValidation="false" OnItemClick="MenuClickHandler" Skin="Web20">
<Items>
<telerik:RadMenuItem ID="rad_New" runat="server" ImageUrl="images/Panelbar/Skins/Web20/icons/new.gif" Text="New" Value="New"></telerik:RadMenuItem>
<telerik:RadMenuItem ID="rad_Edit" runat="server" ImageUrl="images/Panelbar/Skins/Web20/icons/edit.gif" Text="Edit" Value="Edit"></telerik:RadMenuItem>
<telerik:RadMenuItem ID="rad_Save" runat="server" onclick="return FireValidation();" ImageUrl="images/Panelbar/Skins/Web20/icons/save_3.gif" Text="Save" Value="Save"></telerik:RadMenuItem>
<telerik:RadMenuItem ID="rad_Print" runat="server" onclick="Print();" ImageUrl="images/Panelbar/Skins/Web20/icons/print_2.gif" Text="Print" Value="Print"></telerik:RadMenuItem>
<telerik:RadMenuItem ID="rad_Delete" runat="server" ImageUrl="images/Panelbar/Skins/Web20/icons/delete.gif" Text="Delete" Value="Delete"></telerik:RadMenuItem>
<telerik:RadMenuItem ID="rad_Cancel" runat="server" ImageUrl="images/Panelbar/Skins/Web20/icons/cancel.gif" Text="Cancel" Value="Cancel"></telerik:RadMenuItem>
</Items>
</telerik:RadMenu>
</div>
<div id="left_column">
<telerik:RadPanelbar ID="RadPanelbarLeftNav" DataSourceID="SiteMapDataSource1"
runat="server" Skin="Web20" CausesValidation="false" Width="210px"
onitemdatabound="RadPanelbarLeftNav_ItemDataBound"></telerik:RadPanelbar>
</div>
<asp:Label ID="lbl_Message" runat="server" CssClass="ErrorMessage" Text=""></asp:Label>
<!--
AJAX Update Panel gets rid of the page flicker that occurs on normal post backs,
and only makes content within the update panel Post Back (partial postback).
Having the update panel around where it is right now screws up all the divs,
and the overlay indicator, but it allows the menu buttons to be in the Update Panel,
is that worth it? maybe, for now indicator works, but not the div overlay.
-->
<div id="right_column">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</ContentTemplate>
<triggers>
</triggers>
</asp:UpdatePanel>
</div>
<div id="footer">
</div>
<!-- Behavior ID is ID for client side (vs regular ID for server side) -->
<asp:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server" TargetControlID="UpdatePanel1">
<Animations>
<OnUpdating>
<Parallel duration="0">
<ScriptAction Script="$get('updateProgressDiv').style.display = '';" />
</Parallel>
</OnUpdating>
<OnUpdated>
<Parallel duration="0">
<ScriptAction Script="$get('updateProgressDiv').style.display = 'none';" />
</Parallel>
</OnUpdated>
</Animations>
</asp:UpdatePanelAnimationExtender>
<div id="updateProgressDiv" class="updateProgress" style="display:none">
<div align="center" style="margin-top:13px;">
<img alt="" src="images/indicator.gif" />
<span class="updateProgressMessage">Loading ...</span>
</div>
</div>
</div> <!--end wrapper-->
<script type="text/javascript" language="javascript">
var _updateProgressDiv;
var _backgroundDiv;
var _rightDiv;
function pageLoad(sender, args){
// register for our events
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
// get the updateprogressdiv
_updateProgressDiv = $get('updateProgressDiv');
// fetch the right content column
_rightDiv = document.getElementById('right_column');
// create the div that we will position over the column during postbacks
_backgroundDiv = document.createElement('div');
_backgroundDiv.style.display = 'none';
_backgroundDiv.style.zIndex = 10000;
_backgroundDiv.className = 'background';
// add the element to the DOM
_rightDiv.parentNode.appendChild(_backgroundDiv);
}
function beginRequest(sender, args){
// make it visible
_updateProgressDiv.style.display = '';
_backgroundDiv.style.display = ''; ////////////
// get the bounds of both the right column div and the progress div
var columnBounds = Sys.UI.DomElement.getBounds(_rightDiv);
if (columnBounds.height < 25)
{ //if it is the non_ajax column, get those bounds, DONT LIKE HARDCODING 25 ABOVE
_rightDiv = document.getElementById('right_column_non_ajax');
columnBounds = Sys.UI.DomElement.getBounds(_rightDiv);
}
var updateProgressDivBounds = Sys.UI.DomElement.getBounds(_updateProgressDiv);
// center of right column div
var x = columnBounds.x + Math.round(columnBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
var y = columnBounds.y + Math.round(columnBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);
// set the dimensions of the background div to the same as the right column
_backgroundDiv.style.width = columnBounds.width + 'px'; ///////////
_backgroundDiv.style.height = columnBounds.height + 'px'; //////////
// set the progress element to this position
Sys.UI.DomElement.setLocation(_updateProgressDiv, x, y);
// place the div over the right column div
Sys.UI.DomElement.setLocation(_backgroundDiv, columnBounds.x, columnBounds.y); ///////////
}
function endRequest(sender, args) {
// make it invisible
_updateProgressDiv.style.display = 'none';
_backgroundDiv.style.display = 'none'; //////////////
}
function FireValidation()
{
if (typeof(Page_ClientValidate) == 'function')
{
if (Page_ClientValidate())
{
return true;
}
return false;
}
return false;
}
function Print()
{
window.print();
}
</script>
</form>
</body>
</html>
Content:
<%@ Page Language="C#" MasterPageFile="~/Default.master" AutoEventWireup="true" CodeFile="UnavailableHours.aspx.cs" Inherits="UnavailableHours" Title="[Your Company Name Here] - Unavalaible Hours" %>
<%@ Register Assembly="AjaxControlToolkit" TagPrefix="ajx" Namespace="AjaxControlToolkit" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ MasterType virtualPath="~/Default.master"%>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<h2>Unavailable Hours Request Form</h2>
<div id="form">
<div class="left_small_form">
<p>Date Submitted:</p>
</div>
<div class="right_small_form">
<asp:Label ID="txt_DateRequested" runat="server" Text="" Width="240px"></asp:Label>
</div>
<div class="left_small_form">
<p>Name:</p>
</div>
<div class="right_small_form">
<asp:Label ID="txt_FullName" runat="server" Text="" Width="240px"></asp:Label>
</div>
<div class="left_small_form">
<p>Employee Number:</p>
</div>
<div class="right_small_form">
<asp:Label ID="txt_EmployeeID" runat="server" Text="" Width="240px"></asp:Label>
</div>
<div class="left_small_form">
<p>Phone number for questions:</p>
</div>
<div class="right_small_form">
<asp:TextBox ID="txt_Phone" runat="server" Width="240px" Height="20.5px"></asp:TextBox>
</div>
<div class="full_column_form">
<p> </p>
</div>
<div class="full_column_form">
<telerik:RadScheduler runat="server" ID="RadScheduler1" Width="725px" Height="600px" StartEditingInAdvancedForm="false"
Skin="Office2007" DataKeyField="UnavailableHoursID" DataStartField="UnavailableBegins"
DataEndField="UnavailableEnds" DataSubjectField="Description" SelectedView="DayView"
DayStartTime="07:00:00" DayEndTime="21:00:00"
OnFormCreating="RadScheduler1_FormCreating"
OnAppointmentDelete="RadScheduler1_AppointmentDelete"
OnAppointmentUpdate="RadScheduler1_AppointmentUpdate">
</telerik:RadScheduler>
</div>
<div class="left_small_form">
<p></p>
</div>
<div class="right_small_form">
<asp:Button ID="btn_Submit" Width="100px" runat="server" Text="Submit" OnClick="btn_Submit_Click" />
</div>
<asp:RegularExpressionValidator ID="val_PhoneFormat" Display="None" runat="server" ControlToValidate="txt_Phone" ErrorMessage="<B>Invalid Phone ###-###-####.</B>" ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"></asp:RegularExpressionValidator>
<ajx:validatorCalloutExtender id="vce_PhoneFormat" runat="server" HighlightCssClass="ValidatorCallout" TargetControlID="val_PhoneFormat"></ajx:validatorCalloutExtender>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadScheduler1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadScheduler1" />
<telerik:AjaxUpdatedControl ControlID="RadDock1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="RadDock1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadScheduler1" />
<telerik:AjaxUpdatedControl ControlID="RadDock1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadScriptBlock runat="server" ID="RadScriptBlock2">
<script type="text/javascript">
function openEditForm()
{
var dock = $find("<%=RadDock1.ClientID%>");
// Center the RadDock on the screen
var viewPort = $telerik.getViewPortSize();
var xPos = Math.round((viewPort.width - parseInt(dock.get_width())) / 2);
var yPos = Math.round((viewPort.height - parseInt(dock.get_height())) / 2);
$telerik.setLocation(dock.get_element(), { x: xPos, y: yPos });
dock.set_closed(false);
var descriptionTextBox = $get('<%= txt_DescriptionText.ClientID %>');
descriptionTextBox.focus();
Sys.Application.remove_load(openEditForm);
}
function hideForm()
{
var dock = $find("<%=RadDock1.ClientID%>");
dock.set_closed(true);
}
</script>
</telerik:RadScriptBlock>
<telerik:RadDock runat="server" ID="RadDock1" Skin="Office2007"
Width="550px" Height="350px" Closed="true" Style="z-index: 1000;"
Title="Unavailable Hours Entry" EnableDrag="false">
<Commands>
<telerik:DockCloseCommand />
</Commands>
<ContentTemplate>
<br />
<br />
<table>
<tr>
<td><p>Description: </p></td>
<td><asp:TextBox runat="server" ID="txt_DescriptionText" Width="240px" Height="20.5px"></asp:TextBox>
<asp:RequiredFieldValidator ID="req_Desc" runat="server" ControlToValidate="txt_DescriptionText" Display="None" ErrorMessage="<B>Description is required.</B>"></asp:RequiredFieldValidator>
<ajx:validatorCalloutExtender id="vce_Desc" runat="server" HighlightCssClass="ValidatorCallout" TargetControlID="req_Desc"></ajx:validatorCalloutExtender> </td>
</tr>
<tr>
<td><p>Starts at: </p></td>
<td><telerik:RadDateTimePicker ID="rad_StartTime" runat="server" Skin="Office2007"
SharedCalendarID="SharedCalendar" SharedTimeViewID="SharedTimeView">
</telerik:RadDateTimePicker>
<asp:RequiredFieldValidator Runat="server" ID="req_Start" Display="None" ControlToValidate="rad_StartTime" ErrorMessage="<B>Start Time is required.</B>" />
<ajx:validatorCalloutExtender id="vce_Start" runat="server" HighlightCssClass="ValidatorCallout" TargetControlID="req_Start"></ajx:validatorCalloutExtender> </td>
</tr>
<tr>
<td><p>Ends at: </p></td>
<td><telerik:RadDateTimePicker ID="rad_EndTime" runat="server" Skin="Office2007"
SharedCalendarID="SharedCalendar" SharedTimeViewID="SharedTimeView">
</telerik:RadDateTimePicker>
<asp:RequiredFieldValidator Runat="server" ID="req_End" Display="None" ControlToValidate="rad_EndTime" ErrorMessage="<B>End Time is required.</B>" />
<ajx:validatorCalloutExtender id="vce_End" runat="server" HighlightCssClass="ValidatorCallout" TargetControlID="req_End"></ajx:validatorCalloutExtender> </td>
</tr>
<tr>
<td><p>Comments: </p></td>
<td><asp:TextBox ID="txt_Comments" runat="server" Width="240px" Height="80px" TextMode="MultiLine"></asp:TextBox></td>
</tr>
<tr>
<td><p></p></td>
<td><asp:Button runat="server" ID="SubmitButton" Text="Update" OnClick="Dock_SubmitButton_Click" />
<button onclick="hideForm();" type="button" style="margin-right:20px;">Cancel</button></td>
</tr>
</table>
<telerik:RadTimeView ID="SharedTimeView" runat="server" Skin="Office2007">
</telerik:RadTimeView>
<telerik:RadCalendar ID="SharedCalendar" runat="server" Skin="Office2007" EnableMonthYearFastNavigation="False"
EnableMultiSelect="False" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False">
</telerik:RadCalendar>
</ContentTemplate>
</telerik:RadDock>
</div>
</asp:Content>