Calendar inside UpdatePanel not working as Trigger with Master page

Question

I got 2 test pages: one with Master page and second empty.

The empty one looks like this:

<asp:ScriptManager ID="scriptManager" runat="server" />
<asp:UpdatePanel ID="calendarUpdatePanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Calendar ID="calendar" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="timetableUpdatePanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:PlaceHolder ID="placeHolder" runat="server" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Calendar" EventName="SelectionChanged" />
    </Triggers>
</asp:UpdatePanel>

When user selects Date from Calendar (first UpdatePanel), I'm showing Date related information insite placeHolder (second UpdatePanel). This works on both pages.

The one with Master page has same Content. If I press '>' or '<' (next or prev month) on Calendar in empty page, Calendar gets updated and I see next/previous month. The same function on page with Master page does not work (if I press on next or prev month I still see same month).

Any ideas where the issue is?

Answer 1

You should lay the Calendar UpdatePanel to the ContentTemplate of the Controller/DisplayUnit's UpdatePanel.

So that the Calendar can interactive with the Controller/DisplayUnit.

For exmaple. the controller button can toggle the CalendarUpdatePanel.

<asp:UpdatePanel runat="server" ID="UpdatePanelControlDateEnd" UpdateMode="Conditional" ChildrenAsTriggers="True" RenderMode="Inline">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ImageButtonDateEnd" EventName="Click" />
        <asp:AsyncPostBackTrigger ControlID="CalendarDateEnd" EventName="SelectionChanged" />
    </Triggers>
    <ContentTemplate>
        <span style="display:inline-block;">
        <asp:UpdatePanel runat="server" ID="UpdatePanelCalendarDateEnd" 
            UpdateMode="Conditional" ChildrenAsTriggers="True" Visible="False">
            <ContentTemplate>
                <asp:Calendar ID="CalendarDateEnd" runat="server" OnSelectionChanged="CalendarDateEnd_SelectionChanged"
                Style="position:absolute;margin:5px;" BackColor="White" BorderColor="Black" DayNameFormat="Shortest"
                Font-Names="Times New Roman" Font-Size="10pt" ForeColor="Black" Height="220px"
                NextPrevFormat="FullMonth" TitleFormat="Month" Width="400px">
                    <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" ForeColor="#333333"
                    Height="10pt" />
                    <DayStyle Width="14%" />
                    <NextPrevStyle Font-Size="8pt" ForeColor="White" />
                    <OtherMonthDayStyle ForeColor="#999999" />
                    <SelectedDayStyle BackColor="#CC3333" ForeColor="White" />
                    <SelectorStyle BackColor="#CCCCCC" Font-Bold="True" Font-Names="Verdana" Font-Size="8pt"
                    ForeColor="#333333" Width="1%" />
                    <TitleStyle BackColor="Black" Font-Bold="True" Font-Size="13pt" ForeColor="White"
                    Height="14pt" />
                    <TodayDayStyle BackColor="#CCCC99" />
                </asp:Calendar>
            </ContentTemplate>
            </asp:UpdatePanel>
        </span> 
        <span style="white-space:nowrap">
           <asp:TextBox ID="TextBoxDateEnd" runat="server" Width="100px"></asp:TextBox>
           <asp:ImageButton ID="ImageButtonDateEnd" runat="server" OnClientClick=""
           CausesValidation="False" onclick="ImageButtonDateEnd_Click" ImageUrl="~/Resources/Images/pic_drop_down_image_button.png"
           style="left:-23px;top:0px;vertical-align:middle;position:relative;height:18px;" />
        </span>
    </ContentTemplate>
</asp:UpdatePanel>

Codes above, which were implied inside a page with Master page, were passed the testing on IE7,IE8,IE9(developing mode of IE 11),Firefox 32.(But the UpdatePanel its self sames has some js bug on IE 10/11.) So for IE 10/11, you'd better modify these codes, to avoid to use the UpdatePanel.

For example:

<span>
    <span style="display:inline-block;">
        <asp:Calendar ID="CalendarStart" runat="server" 
        onselectionchanged="CalendarDateStart_SelectionChanged" Visible="False" 
        style="position:absolute;margin:5px;" 
            BackColor="White" BorderColor="Black" 
            DayNameFormat="Shortest" Font-Names="Times New Roman" Font-Size="10pt" 
            ForeColor="Black" Height="220px" NextPrevFormat="FullMonth" TitleFormat="Month" 
            Width="400px">
            <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" 
                ForeColor="#333333" Height="10pt" />
            <DayStyle Width="14%" />
            <NextPrevStyle Font-Size="8pt" ForeColor="White" />
            <OtherMonthDayStyle ForeColor="#999999" />
            <SelectedDayStyle BackColor="#CC3333" ForeColor="White" />
            <SelectorStyle BackColor="#CCCCCC" Font-Bold="True" Font-Names="Verdana" 
                Font-Size="8pt" ForeColor="#333333" Width="1%" />
            <TitleStyle BackColor="Black" Font-Bold="True" Font-Size="13pt" 
                ForeColor="White" Height="14pt" />
            <TodayDayStyle BackColor="#CCCC99" />
        </asp:Calendar>
    </span>
    <span style="white-space:nowrap">
      <asp:TextBox ID="TextBoxDateStart" runat="server" Width="100px"></asp:TextBox>
      <asp:ImageButton ID="ImageButtonDateStart" runat="server" OnClientClick=""
      CausesValidation="False" onclick="ImageButtonDataStart_Click" ImageUrl="~/Resources/Images/pic_drop_down_image_button.png"
      style="left:-23px;top:0px;vertical-align:middle;position:relative;height:18px;" />
    </span>
</span>

Have fun.