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

UpdatePanel around RadScheduler

1 Answer 287 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 28 Aug 2008, 03:01 PM
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:

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

Sort by
0
Joe
Top achievements
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=" &raquo; " 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>&nbsp; </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>
Tags
Scheduler
Asked by
Joe
Top achievements
Rank 1
Answers by
Joe
Top achievements
Rank 1
Share this question
or