issue with ModalPopup (ModalPopupExtender) with 2 updatepanels

Question

I have a ModalPopup with 2 updatepanels. It all works great, but I want the second update panel to show up only when the user picks an option in an asp:RadioButtonList in updatepanel 1.

When I set the Visible="false" on the second asp:UpdatePanel, the entire ModalPopup panel stops showing up. I only included part of the code, I have everything working as needed, but this is a nice to have... (Using VS2012 CSS3 HTML5 C#.NET on an ASP.NET Website)

Here is the aspx:

<div id="divScheduleTask" runat="server">

<asp:Panel ID="pnlScheduleTask" runat="server" >
     <asp:UpdatePanel runat="server" ID="udpScheduleTask">
         <ContentTemplate>
             <asp:Label ID="lblTaskSch" Text="Task Scheduling: " runat="server" />
             <br />
             <asp:Label ID="lblSchType" runat="server" Text="Select Due Date Type :"/>
             <br />
             <asp:RadioButtonList ID="radSchType" RepeatDirection="Horizontal"  runat="server"  OnSelectedIndexChanged="ddlSchType_SelectedIndexChanged">
                <asp:ListItem  Text="Exact DueDate" Value="Exact"/>
                <asp:ListItem  Text="Dynamic DueDate" Value="Dynamic"/>
             </asp:RadioButtonList><br />
         </ContentTemplate>
     </asp:UpdatePanel>
     <asp:UpdatePanel ID="upSch2" runat="server"  Visible="false">
          <ContentTemplate><asp:Label ID="lblDueDate" runat="server" Text="Select Due Date: " Visible="false"></asp:Label>
          </ContentTemplate>
     </asp:UpdatePanel>
</asp:Panel></div>

I tried to use a div, an asp:Table and now the 2nd updatePanel and as soon as I set the Visible="false" on any of these, the entire panel stops showing up.... What am I missing?!

Answer 1

Setting a control to visible prevents it from rendering. See MSDN: http://msdn.microsoft.com/en-US/library/system.web.ui.control.visible.aspx

What you can try is putting a div (runat server) or asp.net panel in the 2nd update panel and then when you need to hide it, try adding a style or css class to that div or panel which sets the style property of display to "none" like this:

.hiddenPanel{ display:none;}

The above code block is an example of a css class that you might define and which you would add to the div as a class reference such as class="hiddenPanel".