Modal Popup control not firing orginal button click event

Question

Maybe I am not understanding how this works completely but what I have is a gridview custom template with an imagebutton and a modalpopup. Below my page I have my popup panel which is hidden. When I click my image button the panel displays then I click the "btnModalCancelAll" and it starts to step through my method which sets a page variable from 0 to 1 but then the problem comes in it does not continue to the original gridview image click event not sure why. Below is my template field and the popup panel.

<asp:TemplateField>
                    <ItemTemplate>
                      <asp:ImageButton ID="ImageButtonCancelResv" runat="server" Width="20" Height="20px" ImageUrl="~/Images/Delete.png"  OnClick="ImageButtonCancelResv_Click" />
                          <asp:ModalPopupExtender ID="mpe" runat="server" TargetControlID="ImageButtonCancelResv" PopupControlID="pnlModalPanel" CancelControlID="btnModalCancel"></asp:ModalPopupExtender> 
                        <br />
                        <asp:Label ID="Label1" runat="server" Text="Cancel"></asp:Label>

                 </ItemTemplate>

 <asp:Panel ID="pnlModalPanel" CssClass="modalBackground" runat="server" Style="display:none">
    <asp:UpdatePanel runat="server" ID="updatePanelPopUp">
    <ContentTemplate>

            <div id="modalWrap">
             <asp:Label ID="lblAreyousure" runat="server" Text="Are you sure you want to do that?"></asp:Label>
             <div id="divhr1" class="horizontalRule" runat="server"></div>
            <div id="divCancelSummaryAll">
                   <asp:Label ID="lblEntireFamily" runat="server" Text="Cancel all family reservations from this event date."></asp:Label><br />
                   <asp:Label ID="lblSummaryDeleteAll" runat="server" Text=""></asp:Label><br />
                 <asp:Button ID="btnModalDeleteAll" runat="server" CssClass="modalButton" Text="Cancel all Family" OnClick="btnModalDeleteAll_Click" />
            </div>
            <div id="divCancelSummaryOne">
                  <asp:Label ID="Label2" runat="server" Text="Cancel selected child reservation from this event date."></asp:Label><br />
                 <asp:Label ID="lblSummaryDeleteOne" runat="server" Text=""></asp:Label><br />
                 <asp:Button ID="btnModalDeleteOne" runat="server" CssClass="modalButton" Text="Cancel this Child" OnClick="btnModalDeleteOne_Click" />
            </div>
         <br />

            <asp:Button ID="btnModalCancel" runat="server" Text="Cancel" />
           </div>
    </ContentTemplate>
</asp:UpdatePanel>
    </asp:Panel>

joecop joecop · Accepted Answer · 2014-03-07T04:27:11

I suggest you create another button and use it as the TargetControlID for the modal popup. you can hide this button by setting its display to 'none'. This will only be a dummy button so that your code compiles.

Now when you click the button "ImageButtonCancelResv" it will run your code which is in the method OnClick="ImageButtonCancelResv_Click" and at the end of this method you can add a command to show the popup:

mpe.Show();

Example Code:

protected void ImageButtonCancelResv_Click(object sender, EventArgs e)
{
            //Do something here when button is clicked

             mpe.Show();
}

And then

  <asp:TemplateField>
        <ItemTemplate>
          <asp:ImageButton ID="ImageButtonCancelResv" runat="server" Width="20" Height="20px" ImageUrl="~/Images/Delete.png"  OnClick="ImageButtonCancelResv_Click" />
   <div style="display: none">
        <asp:Button ID="btnModalStatusHidden" runat="server" />
    </div>
    <asp:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btnModalStatusHidden" PopupControlID="pnlModalPanel" CancelControlID="btnModalCancel"></asp:ModalPopupExtender> 
<br />
  <asp:Label ID="Label1" runat="server" Text="Cancel"></asp:Label>
</ItemTemplate>

Modal Popup control not firing orginal button click event

1 Answers