PopUpExtender on ImageButton inside GridView problem

Question

I have GridView on my asp.net page, one column in that grid is ImageButton (TemplateField with ID="imbReserve"). On click on that button I want to show PopUp, but when I put TargetControlId="imbReserve" I get error message " A control with ID 'imbReserve' could not be found". How to achieve this, on click on button inside Grid show PopUp ?

Answer 1

The problem is related to the fact that the real ID is getting changed when the page get rendered to the client.

Open your page source in the browser and look at the ID that is generated from asp.net. Then use that ID inside the TargetControlID property

This kind of problem is present with all the templated controls in ASP.NET

A cleaner way will be to bind the TargetControlID property of the ModalPopupExtendr on Page Load where you can use the ClientID property dinamically generated

modalPopupExtender.TargetControlID = myTemplateControl.ClientID;

Answer 2

Have a look at these 2 articles, that just helped me out with this problem

Article 1: A More Traditional approach

The Following is paraphrased from the above article

The Page Code:

 <asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
     <ContentTemplate>            
         <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" 
          Width="95%">
             <Columns>
                 <asp:TemplateField >
                     <ItemTemplate>
                         <asp:Button ID="btnViewDetails" runat="server" Text="Details" OnClick="BtnViewDetails_Click" />
                     </ItemTemplate>
                  </asp:TemplateField>
                  <asp:BoundField DataField="customerid" HeaderText="ID"  />
                  <asp:BoundField DataField="companyname" HeaderText="Company" />
                  <asp:BoundField DataField="contactname" HeaderText="Name"  />
                  <asp:BoundField DataField="contacttitle" HeaderText="Title" />                
             </Columns>                    
         </asp:GridView>
     </ContentTemplate>
 </asp:UpdatePanel>     

<ajaxToolKit:ModalPopupExtender 
            ID="mdlPopup" runat="server" TargetControlID="pnlPopup" PopupControlID="pnlPopup" 
            CancelControlID="btnClose" BackgroundCssClass="modalBackground" />
 <asp:Panel ID="pnlPopup" runat="server" Width="500px" style="display:none">
     <asp:UpdatePanel ID="updPnlCustomerDetail" runat="server" UpdateMode="Conditional">
         <ContentTemplate>
         [Your Content Here]
         </ContentTemplate>                
            </asp:UpdatePanel>
            <div align="right" style="width:95%">
                <asp:Button 
                    ID="btnSave" runat="server" Text="Save" />
                <asp:Button ID="btnClose" runat="server" Text="Close" Width="50px" />
            </div>             
        </asp:Panel>

Note that the GridView is wrapped in an update panel also that the Target Control ID for the Modal Extender is the same as the Pop Up Control ID. This is because the ModalPopUp Extender needs a target control ID and I think this solution is a better plan than using a hidden button.

Now For the Code Behind:

protected void BtnViewDetails_Click(object sender, EventArgs e)
{
    //  Do Anything you need to the contents of the update panel

    //  update the contents in the detail panel
    this.updPnlCustomerDetail.Update();
    //  show the modal popup
    this.mdlPopup.Show();
}   

Article 2:Uses Clientside Javascript

The Following is paraphrased from the above article

The client side Javascript

    <script type="text/javascript">
    //  keeps track of the delete button for the row
    //  that is going to be removed
    var _source;
    // keep track of the popup div
    var _popup;

    function showConfirm(source){
        this._source = source;
        this._popup = $find('mdlPopup');

        //  find the confirm ModalPopup and show it    
        this._popup.show();
    }

    function okClick(){
        //  find the confirm ModalPopup and hide it    
        this._popup.hide();
        //  use the cached button as the postback source
        __doPostBack(this._source.name, '');
    }

    function cancelClick(){
        //  find the confirm ModalPopup and hide it 
        this._popup.hide();
        //  clear the event source
        this._source = null;
        this._popup = null;
    }

Page Code:

    <asp:GridView ID="gvToDoList" runat="server" AutoGenerateColumns="false" >
        <Columns>
            <asp:BoundField DataField="ID" HeaderText="ID" />
            <asp:BoundField DataField="Item" HeaderText="Description" />
            <asp:BoundField DataField="IsCompleted" HeaderText="Complete?" />
            <asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px" >
                <ItemTemplate>
                   <asp:Button ID="btnDelete" runat="server"
                            OnClientClick="showConfirm(this); return false;" 
                            OnClick="BtnDelete_Click" Text="Delete" />
                </ItemTemplate>
            </asp:TemplateField>                            
        </Columns>                    
    </asp:GridView>

    <ajaxToolKit:ModalPopupExtender BehaviorID="mdlPopup" runat="server" 
            TargetControlID="div" PopupControlID="div" 
            OkControlID="btnOk" OnOkScript="okClick();" 
            CancelControlID="btnNo" OnCancelScript="cancelClick();"   
            BackgroundCssClass="modalBackground" />
     <div id="div" runat="server" align="center" class="confirm" style="display:none">
         <img align="absmiddle" src="Img/warning.jpg" />Are you sure you want to delete this item?
         <asp:Button ID="btnOk" runat="server" Text="Yes" Width="50px" />
         <asp:Button ID="btnNo" runat="server" Text="No" Width="50px" />
     </div> 

Again note that the Target Control ID for the Modal Pop Up Extender is the same as the Pop Up Control ID. Also note the OnClientClick attribute on the button in the template field, make sure your include "return false;".

All that is needed in the code behind it the onClick (or onCommand) event handler to do what you need to do.

I've tried both of these approaches successfully.

Hope one of these two works for you.