Duplicated issue - with:
Bug: Popping up a ModalPopUp within its own UpdatePanel causes other update panels to loose DropDownLists (Controls dissapear)
Scenario: A group of DropDownLists and below a GridView within a <UpdatePanel id="up1"> Partial rendering is enabled, Update setting: Using the default ModalPopUp.aspx and cs files for the example site...
Gridview must be on the page and wrapped in a update panel:
Modal must have its own asp:buttons that do something....
What appears to happen when you have asp buttons that perform postbacks - say you have code behind to do the show() hide() routines.... as soon as the buttons are clicked the dropdownlists are never regenerated (by default and I assume when the modal greys everything out since the dropdownlists are selectable - they are hidden until modal popup is closed)... However, buttons in the ModalForm once clicked the dropdown controls are never made visible again. Again this ONLY happens with a Gridview control on the page.....
Simply replace the the modalpopup.aspx with the following (the cs remains same as issue is not code-behind. Even setting the visibility in Page_Load events doesn't effect the results...
code below:
<%@ Page Language="C#" MasterPageFile="~/DefaultMaster.master" AutoEventWireup="true" CodeFile="ModalPopup.aspx.cs" Inherits="ModalPopup_ModalPopup" Title="ModalPopup Sample" %>
<%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<atlas:ScriptManager id="ScriptManager" runat="server" EnablePartialRendering="true"></atlas:ScriptManager>
<div class="demoarea">
<div class="demoheading">ModalPopup Demonstration</div>
<p id="Paragraph1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
<br />
<asp:LinkButton ID="LinkButton1" runat="server" Text="Click here to change the paragraph style"></asp:LinkButton>
<script type="text/javascript">
var styleToSelect;
function onOk() {
$('Paragraph1').className = styleToSelect;
}
</script>
</br>
<atlas:UpdatePanel ID="UpdatePanel1" Mode="Conditional" RenderMode="Inline" runat="server" >
<ContentTemplate>
<table width="100%">
<tr><td><asp:Button ID="btnCheckAll" Text="Select All" runat="server" /></td><td><asp:Button ID="btnUnCheckAll" Text= "Unselect All" runat="server" /></td>
<td>
Sort By:
<asp:DropDownList id="dropSortBy" AutoPostBack="True" Runat="Server" >
<asp:ListItem Text="Named Page ID" Value="0" />
<asp:ListItem Text="Grouping" Value="2" />
<asp:ListItem Text="Community" Value="3" />
</asp:DropDownList>
</td>
<td>
Order By:
<asp:DropDownList id="dropOrderBy" AutoPostBack="True" Runat="Server" >
<asp:ListItem Text="Descending" value="0" />
<asp:ListItem Text="Ascending" value="1" />
</asp:DropDownList>
</td>
</tr>
</table>
<asp:GridView BackColor="Azure" GridLines="None" ShowHeader="False" Width="100%" ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ItemID"
DataSourceID="ObjectDataSource1">
<Columns>
<asp:TemplateField>
<EditItemTemplate>
<asp:Panel ID="Panel7" runat="server" CssClass="popupMenu" Width="80">
<div style='border:1px outset white'>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update" Text="Update"></asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel"></asp:LinkButton>
</div>
</asp:Panel>
<asp:Panel ID="Panel8" runat="server" Width="80%">
<table width="100%">
<tr>
<td width="30%">Title:<br /><asp:TextBox Font-Bold="true" ID="TextBox1" runat="server" Text='<%# Bind("Title") %>' Width="100"></asp:TextBox></td>
<td width="55%">Desc:<br /><asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Description") %>' Width="150"></asp:TextBox></td>
<td width="15%">Pri:<br /><asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("Priority") %>' Width="40"></asp:TextBox></td>
</tr>
</table>
</asp:Panel>
<atlasToolkit:HoverMenuExtender ID="hme1" runat="Server">
<atlasToolkit:HoverMenuProperties TargetControlID="Panel8" PopupControlID="Panel7" HoverCssClass="popupHover" PopupPosition="Right" />
</atlasToolkit:HoverMenuExtender>
</EditItemTemplate>
<ItemTemplate>
<asp:Panel CssClass="popupMenu" ID="PopupMenu" runat="server">
<div style='border:1px outset white'>
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="Edit" Text="Edit"></asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton2" runat="server" CommandName="Delete" Text="Delete"></asp:LinkButton>
</div>
</asp:Panel>
<asp:Panel ID="Panel9" runat="server">
<table width="100%">
<tr>
<td width="25%"><asp:Label Font-Bold="true" ID="Label1" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Title"))) %>'></asp:Label></td>
<td width="50%"><asp:Label ID="Label2" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Description"))) %>'></asp:Label></td>
<td width="25%"><asp:Label ID="Label3" runat="server" Text='<%# Eval("Priority") %>'></asp:Label></td>
</tr>
</table>
</asp:Panel>
<atlasToolkit:HoverMenuExtender ID="hme2" runat="Server">
<atlasToolkit:HoverMenuProperties HoverCssClass="popupHover" PopupControlID="PopupMenu" PopupPosition="Left" TargetControlID="Panel9" PopDelay="25"/>
</atlasToolkit:HoverMenuExtender>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" DeleteMethod="Delete"
InsertMethod="Insert" OldValuesParameterFormatString="original_{0}" SelectMethod="Select"
TypeName="SessionTodoXmlDataObject" UpdateMethod="Update">
<DeleteParameters>
<asp:Parameter Name="Original_ItemID" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="Title" Type="String" />
<asp:Parameter Name="Description" Type="String" />
<asp:Parameter Name="Priority" Type="Int32" />
<asp:Parameter Name="Original_ItemID" Type="Int32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="Title" Type="String" />
<asp:Parameter Name="Description" Type="String" />
<asp:Parameter Name="Priority" Type="Int32" />
</InsertParameters>
</asp:ObjectDataSource>
</ContentTemplate>
</atlas:UpdatePanel>
<atlas:UpdatePanel ID="UpdatePanelModal" Mode="Conditional" RenderMode="Inline" runat="server" >
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" BackColor="Azure" CssClass="modalPopup"
Height="400px" ScrollBars="Vertical" Style='display: none' Width='600px'>
<p>Choose the pagagraph style you would like:</p>
<p ><input type="radio" name="Radio" id="RadioA" onclick="styleToSelect = 'sampleStyleA';" checked="true" /><label for="RadioA" class="sampleStyleA" style='padding:3px;'>Sample paragraph text</label></p>
<p ><input type="radio" name="Radio" id="RadioB" onclick="styleToSelect = 'sampleStyleB';" /><label for="RadioB" class="sampleStyleB" style='padding:3px;'>Sample paragraph text</label></p>
<p ><input type="radio" name="Radio" id="RadioC" onclick="styleToSelect = 'sampleStyleC';" /><label for="RadioC" class="sampleStyleC" style='padding:3px;'>Sample paragraph text</label></p>
<p ><input type="radio" name="Radio" id="RadioD" onclick="styleToSelect = 'sampleStyleD';" /><label for="RadioD" class="sampleStyleD" style='padding:3px;'>Sample paragraph text</label></p>
<p style='text-align:center;'>
<h3>Edit Named Page</h3>
<asp:Panel ID="pnlForm" runat="server" >
<div class="pageDescription" style='WIDTH:500px'>
WARNING: Editing this entry may disrupt your website. Use extreme caution when
changing any entry on the form. You should also test the change by opening a
new browser window and navigating your site.
</div>
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
<asp:Label ID="lblShowMode" text="blah" runat="server" />
<asp:CheckBox ID="chkConfirmAction" runat="server" />
<table>
<tr>
<td valign="top" style='width: 363px;'>
<strong>Module Type:</strong>
<p>
</p>
This determines which module this Named Page entry belongs to. To have the Named Page
available to all configured modules use "Sections" as your choice...
</td>
</tr>
<tr>
</table>
<table>
<TBODY>
<TR>
<td style='width: 363px;'>
<strong>Title:</strong><p></p>
This is the title of the Named Page. Example: Add Link
</td>
<td>
<asp:TextBox id="txtTitle" Runat="server" Width="336px" /> <asp:RequiredFieldValidator ID="valTitle" runat="server"
ErrorMessage="* Title Required" ControlToValidate="txtTitle"></asp:RequiredFieldValidator>
</TR>
<TR>
<td style='width: 363px;' valign='top'>
<strong>Description:</strong><p></p>
<P>You should provide a full description of the module.
</P>
<P>Example: Enables users to add a Link</P>
</td>
<td valign="top">
<asp:TextBox id="txtDescription" TextMode="MultiLine" Columns="40" Rows="3" Runat="server" />
</td>
</TR>
<TR>
<td style='width: 363px;' valign='top'>
<strong>Path:</strong>
<P>
</P>
<P>
Example: /Links_AddLink.aspx</P>
</td>
<td valign="top">
<asp:TextBox id="txtPath" Rows="1" Runat="server" Width="376px" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtPath"
ErrorMessage="* Path Required"></asp:RequiredFieldValidator>
</td>
</TR>
<TR>
<td style='width: 363px;' valign='top'>
<strong>Name: </strong>
<p>
Example: AddLink
</p>
</td>
<td valign="top">
<asp:TextBox id="txtName" runat="server" Text="(required)"
TextAlign="Right" Width="256px" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtName"
ErrorMessage="* Name Required"></asp:RequiredFieldValidator></td>
</TR>
<TR>
<td style='width: 363px;' valign='top'>
<strong>Visibility:</strong><p></p>
You can disable this menu option from being seen if you like.
</td>
<td valign="top">
<asp:CheckBox id="checkIsVisible" runat="server" Text="(check to enable)" />
</td>
</TR>
<TR>
<td style='width: 363px;' valign='top'>
<P>
<strong>Page Content:</strong>
</P>
<P>Example: ASPNET.StarterKit.Communities.Links.AddLink</P>
</td>
<td valign="top">
<asp:TextBox id="txtPageContent" Rows="1" Runat="server" Width="408px" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtPageContent"
ErrorMessage="* Page Content Required"></asp:RequiredFieldValidator>
</td>
</TR>
<TR>
<td style='width: 363px;' valign='top'>
<strong>Grouping:</strong>
<p>
</p>
For use in sorting only, plays no role in Named Page content in terms of the
CSK.
</td>
<td valign="top">
<asp:DropDownList id="dropGP" Runat="server"></asp:DropDownList></td>
</TR>
<TR>
<td style='width: 363px;' valign='top'>
<strong>Communities:</strong><p></p>
When checked (default) assigns named page to all communities.
</td>
<td valign="top">
<asp:CheckBox id="checkAllCommunities" runat="server" Text="(check to enable)" />
</td>
</TR>
<tr>
<td colspan="2">
<asp:Button ID="btnAdd" runat="server" CausesValidation="True" Text="Submit Changes"
UseSubmitBehavior="true" />
<asp:Button id="btnClone" UseSubmitBehavior="false" Text="Submit & Clone" Runat="server" />
<asp:Button ID="btnDelete" UseSubmitBehavior="false" Text="Delete Entry" runat="server" />
<asp:Button id="btnCancel" UseSubmitBehavior="false" Text="Cancel" CausesValidation="false" Runat="server" />
</td>
</tr>
</TBODY>
</table>
</asp:Panel>
<asp:Button ID="OkButton" runat="server" Text="OK"></asp:Button>
<asp:Button ID="CancelButton" runat="server" Text="Cancel"></asp:Button>
</p>
</asp:Panel>
<atlasToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server">
<atlasToolkit:ModalPopupProperties TargetControlID="LinkButton1" PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="OkButton" OnOkScript="onOk()" CancelControlID="CancelButton" />
</atlasToolkit:ModalPopupExtender>
</ContentTemplate>
</atlas:UpdatePanel>
</div>
<div class="demobottom"></div>
<asp:Panel ID="Description_HeaderPanel" runat="server" style='cursor: pointer;'>
<div class="heading">
<asp:Image ID="Description_ToggleImage" runat="server" ImageUrl="~/images/collapse.jpg" /> ModalPopup Description
</div>
</asp:Panel>
<asp:Panel id="Description_ContentPanel" runat="server" style='overflow:hidden;'>
<p>
The ModalPopup extender allows a page to display content to the user in a "modal" manner which prevents the user from interacting with the rest of the page.
The modal content can be any hierarchy of controls and is displayed above a background that can have a custom style applied to it.
When displayed, only the modal content can be interacted with; clicking on the rest of the page does nothing.
When the user is done interacting with the modal content, a click of an OK/Cancel control dismisses the modal content and optionally runs custom script.
The custom script will typically be used to apply whatever changes were made while the modal mode was active.
If a postback is required, simply allow the OK/Cancel control to postback and the page to re-render.
</p>
</asp:Panel>
<asp:Panel ID="Properties_HeaderPanel" runat="server" style='cursor: pointer;'>
<div class="heading">
<asp:Image ID="Properties_ToggleImage" runat="server" ImageUrl="~/images/collapse.jpg" /> ModalPopup Properties
</div>
</asp:Panel>
<asp:Panel id="Properties_ContentPanel" runat="server" style='overflow:hidden;' Height='0px'>
<p>The control above is initialized with this code. The <em>italic</em> properties are optional:</p>
<pre>
<atlasToolkit:ModalPopupExtender ID="MPE" runat="server">
<atlasToolkit:ModalPopupProperties
TargetControlID="LinkButton1"
PopupControlID="Panel1"
<em>BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="OkButton"
OnOkScript="onOk()"
CancelControlID="CancelButton"</em>/>
</atlasToolkit:ModalPopupExtender>
</pre>
<ul>
<li><strong>TargetControlID</strong> - The ID of the element that activates the modal popup</li>
<li><strong>PopupControlID</strong> - The ID of the element to display as a modal popup</li>
<li><strong>BackgroundCssClass</strong> - The CSS class to apply to the background when the modal popup is displayed</li>
<li><strong>DropShadow</strong> - True to automatically add a drop-shadow to the modal popup</li>
<li><strong>OkControlID</strong> - The ID of the element that dismisses the modal popup</li>
<li><strong>OnOkScript</strong> - Script to run when the modal popup is dismissed with the OkControlID</li>
<li><strong>OkCancelID</strong> - The ID of the element that cancels the modal popup</li>
<li><strong>OkCancelScript</strong> - Script to run when the modal popup is dismissed with the CancelControlID</li>
</ul>
</asp:Panel>
<atlasToolkit:CollapsiblePanelExtender ID="demoCpe" runat="Server">
<atlasToolkit:CollapsiblePanelProperties
TargetControlID="Description_ContentPanel"
ExpandControlID="Description_HeaderPanel"
CollapseControlID="Description_HeaderPanel"
Collapsed="False"
ExpandDirection="Vertical"
ImageControlID="Description_ToggleImage"
ExpandedImage="~/images/collapse.jpg"
ExpandedText="Collapse"
CollapsedImage="~/images/expand.jpg"
CollapsedText="Expand"
SuppressPostBack="true" />
<atlasToolkit:CollapsiblePanelProperties
TargetControlID="Properties_ContentPanel"
ExpandControlID="Properties_HeaderPanel"
CollapseControlID="Properties_HeaderPanel"
Collapsed="True"
ExpandDirection="Vertical"
ImageControlID="Properties_ToggleImage"
ExpandedImage="~/images/collapse.jpg"
ExpandedText="Collapse"
CollapsedImage="~/images/expand.jpg"
CollapsedText="Expand"
SuppressPostBack="true" />
</atlasToolkit:CollapsiblePanelExtender>
</asp:Content>