Hi folks,
Goal:
I have a page that contains a dynamically generated table showing articles. In each row within this table, the user is supposed to be able to search for a record to place in the respective row. For that, there is an ImageButton which will trigger a ModalPopupExtender
(MPE) that shows the search-popup.
In the popup, the user will enter a search-string in one of several fields (TextBoxes) and click theSearch-button which will retrieve results and display these in a Results-GridView which is part of the popup. The user may then take over one of the search-results by clicking an ImageButton within one of theResults-GridView's rows.
This will result in the popup being hidden and the controls of the respective row in the dynamic table being overwritten with the search-results contents.
Problem:
That having been said, the MPE of course resides in an UpdatePanel. However, in order to allow the popup's search-button to work properly, there isanother UpdatePanel
within the popup.
The problem now is that the popup will close whenever the Search-button is clicked.
Simplified sample demonstrating the problem:
I have put together a simplified sample that illustrates the problem. The page below will show a dummy-table.
If you click the "Show Popup"-button, the MPE will show a little popup. There, some elements remain hidden.
The hidden elements should be shown seamlessly after you click the "Show Controls"-button. However, the first time the popup will simply hide instead of showing the other stuff. When that happens, you can click the "Show Controls"-button again and the popup
will then show what it was supposed to show during the first run.
When the originally hidden controls become visible, you may enter a 0-based indexes (row/col) of the table-cell that should be updated (defaults to R2/C2). When confirming the dialog by clicking its OK-button, the respective cell will change its appearance
and the text of its contained TextBox-control.
I would very much appreciate any hints on how to get the below sample working!
Cheers,
Olaf
<%@ Page Language="VB" AutoEventWireup="false" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %><!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 id="head" runat="server"><title>ModalPopupExtender: Test</title><style type="text/css">
.ModalBG { opacity: .7; filter: alpha(opacity=70); background: black; }
.Popup { height: 140px; width: 270px; padding: 10px; border: 0px; background: #FFF; }
.M5 { margin: 5px; }
.M15 { margin: 15px; }
.tbl, .tbl td { padding: 5px; margin: 15px; text-align: center; border: 1px solid #000; }
.red { color: #FFF; font-weight: bold; background-color: #F00; }</style><script runat="server">
'OK button clicked on popup -> change the row's/col's appearance and its text
Protected Sub cmdpopOK_Click(sender As Object, e As System.EventArgs) Handles cmdpopOK.Click
Dim intRow As Integer = 0
Dim intCol As Integer = 0
Integer.TryParse(txtRowToUpdate.Text, intRow)
Integer.TryParse(txtColToUpdate.Text, intCol)
If intRow > (tblTarget.Rows.Count - 1) OrElse intRow < 0 Then intRow = 0
If intCol > (tblTarget.Rows(0).Cells.Count - 1) OrElse intCol < 0 Then intCol = 0
With DirectCast(tblTarget.FindControl("txtrow" & intRow.ToString() & "_col_" & intCol.ToString()), TextBox)
.Text = Date.Now.ToLongTimeString() & ": R" & intRow.ToString() & ":C" & intCol.ToString()
.CssClass = "red"
End With
mpe.Hide()
End Sub
'Show the popup
Protected Sub cmdShowPopup_Click(sender As Object, e As System.EventArgs) Handles cmdShowPopup.Click
'The following 2 statements should be active, but have been commented out in order to be able to show the panel upon 2nd click.
'pnlpopCtrls.Attributes.Add("style", "display:none")
'cmdpopOK.Attributes.Add("style", "display:none")
mpe.Show()
End Sub
'Show the ctrls-panel
Protected Sub cmdpopShowCtrls_Click(sender As Object, e As System.EventArgs) Handles cmdpopShowCtrls.Click
'Unhide the Ctrls-panel and the OK-button
pnlpopCtrls.Attributes("style") = String.Empty
cmdpopOK.Attributes("style") = String.Empty
End Sub
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
Dim tr As TableRow
Dim tc As TableCell
For intRowIndex As Integer = 0 To 5
tr = New TableRow()
For intColIndex As Integer = 0 To 5
tc = New TableCell() With {.ID = "row" & intRowIndex.ToString() & "_col_" & intColIndex.ToString()}
tc.Controls.Add(New TextBox() With {.ID = "txt" & tc.ID, .ClientIDMode = UI.ClientIDMode.Static, .Text = "Row #" & intRowIndex.ToString() & ", Col #" & intColIndex.ToString()})
tr.Controls.Add(tc)
tblTarget.Rows.Add(tr)
Next
Next
'Default values
If String.IsNullOrEmpty(txtRowToUpdate.Text) Then txtRowToUpdate.Text = "2"
If String.IsNullOrEmpty(txtColToUpdate.Text) Then txtColToUpdate.Text = "2"
End Sub</script></head><body><form id="form1" runat="server"><asp:ScriptManager ID="sm" runat="server" EnableScriptGlobalization="true" EnablePartialRendering="true" /><div><asp:UpdatePanel runat="server" ID="up" UpdateMode="Conditional" ChildrenAsTriggers="true"><ContentTemplate><h4>The table below should change its appearance and be updated with the current system-time after you confirm the MPE-dialog.</h4><br /><asp:Table runat="server" ID="tblTarget" CssClass="tbl" /><br /><asp:Button runat="server" ID="cmdShowPopup" Text="Show Popup" CssClass="M15" /><asp:Button runat="server" ID="cmdShowPopup_Dummy" Text="Dummy" Style="display: none" /><asp:Panel runat="server" ID="pnlPopup" Style="display: none"><div class="Popup"><asp:Label runat="server" ID="lblpopTest" Text="Popup-Test" CssClass="M15" /><br /><asp:Button runat="server" ID="cmdpopShowCtrls" Text="Show Controls" Font-Bold="true" /><br /><asp:UpdatePanel runat="server" ID="upInner" UpdateMode="Always" ChildrenAsTriggers="true"><ContentTemplate><asp:Panel runat="server" ID="pnlpopCtrls" Style="display: none"><asp:Label runat="server" ID="lblRowToUpdate" Text="Row to be updated (zero-based):" CssClass="M5" /><asp:TextBox runat="server" ID="txtRowToUpdate" CssClass="M5" Width="25px" /><asp:Label runat="server" ID="lblColToUpdate" Text="Col to be updated (zero-based):" CssClass="M5" /><asp:TextBox runat="server" ID="txtColToUpdate" CssClass="M5" Width="25px" /></asp:Panel></ContentTemplate><Triggers><asp:AsyncPostBackTrigger ControlID="cmdpopShowCtrls" EventName="Click" /></Triggers></asp:UpdatePanel><asp:Button runat="server" ID="cmdpopCancel" Text="Cancel" CssClass="M5" /><asp:Button runat="server" ID="cmdpopOK" Text="OK" CssClass="M5" Style="display: none" /></div></asp:Panel><ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="cmdShowPopup_Dummy" PopupControlID="pnlPopup" BackgroundCssClass="ModalBG" DropShadow="true" CancelControlID="cmdpopCancel" /></ContentTemplate><Triggers><asp:AsyncPostBackTrigger ControlID="cmdpopOK" EventName="Click" /></Triggers></asp:UpdatePanel></div></form></body></html>