ModalPopupExtender in UserControl - user-controls

Question

I want to have a UserControl which represents an input dialog (panel with customizable labels and textboxes). This UserControl needs to be opened via a ModalPopupExtender.
I started with the following solution which works, but is not in a UC:
<!-- Popup to add brand -->
<asp:Panel ID="pnlAddPopup" DefaultButton="cmdOk" runat="server" style="display: none;">
<atk:ModalPopupExtender ID="popupExtender" runat="server" TargetControlID="cmdAdd" PopupControlID="pnlAddPopup" CancelControlID="cmdAbbrechen" BackgroundCssClass="modalBackground" />
<div id="Div1" style="border-style: none; padding: 5px;" runat="server">
<table style="border: 0">
<tr>
<td style="background-color: #CCCCCC; height: 15px; text-align: right" />
</tr>
<tr>
<td style="background-color: #FFE580;">
<div style="padding: 10px;">
<cc1:SDDataLabel ID="name" runat="server" Text="Name"/>
<cc1:SDTextBox ID="txtInput" Width="300" runat="server"/>
</div>
</td>
</tr>
<tr>
<td style="background-color: #FFE580; height: 20px; text-align: center">
<cc1:SDButton ID="cmdOk" OnClick="CmdAddOkClick" CssClass="button" runat="server" />
<cc1:SDButton ID="cmdAbbrechen" CssClass="button" runat="server" />
</td>
</tr>
</table>
</div>
</asp:Panel>
What I would prefer: If I could add one single line like
<uc1:InputPopup ID="inputPopup" runat="server" TargetControlID="cmdAdd"/>
So I created the following "InputPopup" UserControl:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="InputPopup.ascx.cs" Inherits="ABC.InputPopup" %>
<%# Register Assembly="ABC" TagPrefix="cc1" Namespace="ABC" %>
<atk:ModalPopupExtender ID="popupExtender" runat="server" PopupControlID="pnlAddPopup" CancelControlID="cmdAbbrechen" BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlAddPopup" DefaultButton="cmdOk" runat="server" style="display: none;">
<div id="Div1" style="border-style: none; padding: 5px;" runat="server">
<table style="border: 0">
<tr>
<td style="background-color: #CCCCCC; height: 15px; text-align: right" />
</tr>
<tr>
<td style="background-color: #FFE580;">
<div style="padding: 10px;">
<cc1:SDDataLabel ID="name" runat="server" Text="Name"/>
<cc1:SDTextBox ID="txtInput" Width="300" runat="server"/>
</div>
</td>
</tr>
<tr>
<td style="background-color: #FFE580; height: 20px; text-align: center">
<cc1:SDButton ID="cmdOk" OnClick="CmdAddOkClick" CssClass="button" runat="server" />
<cc1:SDButton ID="cmdAbbrechen" CssClass="button" runat="server" />
</td>
</tr>
</table>
</div>
</asp:Panel>
In addition, I have the code behind file which does define the property TargetControlID.
public TargetControlID TargetControlID
{
set{ popupExtender.TargetControlID = value;}
}
This solution would be great, but does not work, since the ModalPopupExtender is not listening on the cmdAdd since the cmdAdd is placed in the parent control...
My question: Is it possible to overwrite the TargetControlID setter of ModalPopupExtender in order to listen to the right control click event (the one which is located in the parent control in my case)?
Or is there any other solution for my problem? I read about using
$("#<%= popupExtender.ClientID").show()
as OnClientClick function on the TargetControl, but I am not able to do this in the parent control, since popupExtender would be in the UC.
What also works is the following solution. But I would prefer the "one line UC solution" above, without the ModalPopupExtender in the parent control
<cc1:SDButton ID="cmdAdd" CssClass="button" runat="server" />
<!-- Popup to add brand -->
<atk:ModalPopupExtender ID="popupExtender" runat="server" TargetControlID="cmdAdd" PopupControlID="pnlAddPopup" BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlAddPopup" runat="server">
<uc1:InputPopup ID="inputPopup" runat="server"/>
</asp:Panel>

Answer 1

The code of the UserControl with the ModalPopupExtender -> PopupInputPanelOkCancel.ascx
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="PopupInputPanelOkCancel.ascx.cs" Inherits="ABC.PopupPanels.PopupInputPanelOkCancel" %>
<%# Register TagPrefix="atk" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit, Version=4.5.7.607, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" %>
<span style="display:none">
<asp:Button runat="server" ID="dummyButton" />
</span>
<atk:ModalPopupExtender ID="popupExtender" runat="server" PopupControlID="pnlPopup" TargetControlID="dummyButton" CancelControlID="cmdAbbrechen" BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlPopup" DefaultButton="cmdOk" runat="server">
<div id="Div1" style="border-style: none; padding: 5px;" runat="server">
<table style="border: 0">
<tr>
<td style="background-color: #CCCCCC; height: 15px; text-align: right" />
</tr>
<tr>
<td style="background-color: #FFE580;">
<div style="padding: 10px;">
<asp:Label ID="lblLabel" runat="server" Text="Name"/>
<asp:TextBox ID="txtInput" Width="300" runat="server"/>
</div>
</td>
</tr>
<tr>
<td style="background-color: #FFE580; height: 20px; text-align: center">
<asp:Button ID="cmdOk" OnClick="CmdOkClick" CssClass="button" runat="server" />
<asp:Button ID="cmdAbbrechen" CssClass="button" runat="server" />
</td>
</tr>
</table>
</div>
</asp:Panel>
In the code behind, I have a property to set the BehaviorId of the extender and one to get the field on which we should set the focus after the panel pops up -> PopupInputPanelOkCancel.ascx.cs
public string BehaviorId
{
get { return popupExtender.BehaviorID; }
set { popupExtender.BehaviorID = value; }
}
public string FocusId
{
get { return txtInput.ClientID; }
}
In the aspx page, I add the control like this:
<uc1:PopupInputPanelOkCancel ID="PopupInputPanelOkCancel1" BehaviorId="addPopupBehaviorId" runat="server"/>
Make sure that you add the scriptmanager on top of the page (if not added somewhere else in a parent control.
<asp:ScriptManager ID="asm" runat="server" />
To call the show method, I added the following code to a button:
<asp:Button ID="cmdSorteAdd" CssClass="button" runat="server" OnClientClick="showModalPopupExtender('addPopupBehaviorId');return false;" />
Additionally, I added the following javascript code at the end of the aspx page
<script type="text/javascript">
function pageLoad() {
// $find is not jQuery. It's from MS and returns an AJAX control.
var modal = $find('<%=PopupInputPanelOkCancel1.BehaviorId%>');
if (modal != null) {
modal.add_shown(modalPopupExtenderShown);
}
}
function showModalPopupExtender(modalBehaviorId) {
// $find is not jQuery. It's from MS and returns an AJAX control.
var modal = $find(modalBehaviorId);
if (modal != null) {
modal.show();
}
}
function modalPopupExtenderShown() {
//jQuery selector
$('#<%=PopupInputPanelOkCancel1.FocusId%>').focus();
}
</script
What I don't like yet is that I need to set the value of BehaviorId (addPopupBehaviorId) manually in the
OnClientClick="showModalPopupExtender('addPopupBehaviorId');return false;"
It would be perfect if one would need to add it only in the
<uc1:PopupInputPanelOkCancel ID="PopupInputPanelOkCancel1" BehaviorId="addPopupBehaviorId" runat="server"/>
But it does work :)
My problem I am still on is that when the function modalPopupExtenderShown is called, the focus() does fire a postback in my case. I don't understand why there is a postback. Do you have any ideas? -> Edit: I used the wrong function. I used Microsofts $find('id').focus() instead of jQuery's $('#id').focus() to set the focus. Now, everything works like a charm.
Other than that, my solution works fine and I hope that someone finds it useful.