title: ImageButton in GridView TemplateField wont show AJAX Popup Modal
body: <p>I have a page that displays a <code>GridView</code> containing an <code>ImageButton TemplateField</code>. My goal is to display an AJAX modal popup when one of those buttons are clicked, along with displaying the row where the button is pressed. The problem is that when I click on a button, it does not show the modal popup. I tried to use this <a href="http://msdn.microsoft.com/en-us/library/vstudio/bb907626(v=vs.100).aspx" rel="nofollow">tutorial</a> and read several articles on this site about this issue but to no avail. How to properly fire the button event and show the popup?</p>
  
  <p>Here is the snippet for the gridview:</p>
  
  <pre><code>   &lt;asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
              Width="505px" DataSourceID="SqlDataSource1"&gt;
              &lt;Columns&gt;
  
                  &lt;asp:BoundField DataField="ItemDesc" 
                      SortExpression="ItemDesc" ItemStyle-Width="100px" ItemStyle-Height="100px"&gt;
      &lt;ItemStyle Height="100px" Width="100px"&gt;&lt;/ItemStyle&gt;
                  &lt;/asp:BoundField&gt;
                  &lt;asp:BoundField DataField="Price" SortExpression="Price" 
                      ItemStyle-Width="100px" ItemStyle-Height="100px"&gt;
  
      &lt;ItemStyle Height="100px" Width="100px"&gt;&lt;/ItemStyle&gt;
                  &lt;/asp:BoundField&gt;
  
                &lt;asp:TemplateField&gt;
                  &lt;EditItemTemplate&gt;
                      &lt;asp:TextBox ID="TextBox1" runat="server"&gt;&lt;/asp:TextBox&gt;
                  &lt;/EditItemTemplate&gt;
                  &lt;ItemTemplate&gt;
                      &lt;asp:Image ID="Image1" runat="server" Height="200px" 
                          ImageUrl='&lt;%# Eval("ImagePath") %&gt;' Width="200px" /&gt;
                  &lt;/ItemTemplate&gt;
              &lt;/asp:TemplateField&gt;
  
                  &lt;asp:TemplateField ShowHeader="False"&gt;
                      &lt;ItemTemplate&gt;
                          &lt;asp:ImageButton ID="ImageButton1" runat="server" CommandName="atc"         ImageUrl="~/App_Themes/img/shop/addtocart.png" 
                              Text="Add to Cart" CommandArgument="&lt;%# ((GridViewRow)     Container).RowIndex %&gt;"/&gt;
                      &lt;/ItemTemplate&gt;
                      &lt;ControlStyle Height="30px" Width="105px" /&gt;
                      &lt;ItemStyle Width="105px" /&gt;
                  &lt;/asp:TemplateField&gt;
  
              &lt;/Columns&gt;
          &lt;/asp:GridView&gt;
  ...
  &lt;asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="HiddenField1" PopupControlID="Panel1" BackgroundCssClass="modalBg" CancelControlID="btnClose"&gt;
  &lt;/asp:ModalPopupExtender&gt;
  &lt;asp:HiddenField ID="HiddenField1" runat="server" /&gt;
  &lt;asp:Panel ID="Panel1" runat="server" Width="500" Height="500" Visible="False" 
      style="background-color:#6f95f4; color:#000000;"&gt;
      &lt;div class="style1"&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
          &lt;table style="width: 90%; height: 71px;"&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      Item Name&lt;/td&gt;
                  &lt;td&gt;
                      &lt;asp:Label ID="lblItemName" runat="server" Text="Label"&gt;&lt;/asp:Label&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      Price&lt;/td&gt;
                  &lt;td&gt;
                      &lt;asp:Label ID="lblPrice" runat="server" Text="Label"&gt;&lt;/asp:Label&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan="2"&gt;
                      &amp;nbsp;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      Quantity&lt;/td&gt;
                  &lt;td&gt;
                      &lt;asp:TextBox ID="TextBox2" runat="server" Type="Number" Min="1"     MaxLength="100" 
                          Width="75px" Height="23px"&gt;&lt;/asp:TextBox&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      Total Price&lt;/td&gt;
                  &lt;td&gt;
                      &lt;asp:Label ID="lblTotalPrice" runat="server" Text="Label"&gt;&lt;/asp:Label&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;br /&gt;
          &lt;br /&gt;
                      &lt;asp:Button ID="btnAddToCart" runat="server" Text="Add to Cart" 
              onclick="btnAddToCart_Click" /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
  
          &lt;asp:Button ID="btnClose" runat="server" onclick="btnClose_Click" Text="Close" 
              Width="199px" /&gt;
      &lt;/div&gt;
  &lt;/asp:Panel&gt;
  </code></pre>
  
  <p>And here's my code for the event:</p>
  
  <pre><code> protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
      {
          if (e.CommandName.Equals("atc"))
          {
              ModalPopupExtender1.Show();
  
              //// Retrieve the row index stored in the 
              //// CommandArgument property.
              int index = Convert.ToInt32(e.CommandArgument);
  
              //// Retrieve the row that contains the button 
              //// from the Rows collection.
              GridViewRow row = GridView1.Rows[index];
              lblItemName.Text = row.Cells[0].Text;
              lblPrice.Text = row.Cells[1].Text;
  
              Response.Write("&lt;script&gt;alert('" + row.Cells[0].Text + "\n" + row.Cells[1].Text +     "');&lt;/script&gt;");
  
              //// Add code here to add the item to the shopping cart.
          }
  
      }
  </code></pre>
  
  <p>EDIT: Added the panel code.</p>