title: ASP.NET How to show AjaxControlToolkit Modal Popup from CheckBox
body: <p>I need to <strong>show an AjaxControlToolkit ModalPopupExtender control</strong>, when user checks/unchecks a CheckBox control that is inside a GridView as a TemplateField.</p>
  
  <p>-- <strong>Updated on 24/05/2013</strong></p>
  
  <p>See final solution here...</p>
  
  <p>We finally solved the problem. So I decided to post here the complete solution and the final code.</p>
  
  <p><strong>The GridView</strong></p>
  
  <pre><code>&lt;asp:GridView ID="gvDocs" runat="server" CssClass="grid" AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true"
  OnPageIndexChanging="gvDocs_PageIndexChanging"
  OnSorting="gvDocs_Sorting"
  OnRowDataBound="gvDocs_RowDataBound"&gt;
  &lt;AlternatingRowStyle CssClass="grid_row_alternate"/&gt;
  &lt;HeaderStyle CssClass="grid_header" /&gt;
  &lt;RowStyle CssClass="grid_row" /&gt;
  &lt;SelectedRowStyle CssClass="grid_row_selected" /&gt;
  &lt;Columns&gt;
      &lt;asp:BoundField DataField="ID"/&gt;
      &lt;asp:BoundField DataField="COLUMN_A" SortExpression="COLUMN_A" HeaderText="COLUMN_A" /&gt;
      &lt;asp:BoundField DataField="COLUMN_B" SortExpression="COLUMN_B" HeaderText="COLUMN_B" /&gt;
  
      &lt;!-- TemplateField with the CheckBox and the ModalPopupExtender controls --&gt;
  
      &lt;asp:TemplateField HeaderText="Check" SortExpression="CHECK_COLUMN"&gt;
          &lt;ItemStyle HorizontalAlign="Center"/&gt;
          &lt;ItemTemplate&gt;
              &lt;asp:CheckBox ID="CheckBox1" runat="server"/&gt;
  
              &lt;!-- Modal Popup block --&gt;
  
              &lt;asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground" DropShadow="True" TargetControlID="CheckBox1" PopupControlID="panModalPopup" CancelControlID="CancelButton"/&gt;
              &lt;asp:Panel ID="panModalPopup" runat="server" style="display:none; text-align:left; width:400px; background-color:White; border-width:2px; border-color:#40A040; border-style:solid; padding:10px;"&gt;
                  Are you sure?
                  &lt;br /&gt;&lt;br /&gt;
                  &lt;div style="text-align:right;"&gt;
                      &lt;asp:Button ID="ConfirmButton" runat="server" Text="Confirm" OnClick="ConfirmButton_Click" CommandArgument='&lt;%# DataBinder.Eval(Container.DataItem, "ID") %&gt;'/&gt;
                      &lt;asp:Button ID="CancelButton" runat="server" Text="Cancel"/&gt;
                  &lt;/div&gt;
              &lt;/asp:Panel&gt;
          &lt;/ItemTemplate&gt;
      &lt;/asp:TemplateField&gt;
  &lt;/Columns&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>The code behind</strong></p>
  
  <pre><code>protected void gvDocs_RowDataBound(object sender, GridViewRowEventArgs e)
  {
      if (e.Row.RowType.Equals(DataControlRowType.DataRow))
      {
          // Setting the CheckBox check reading the state from DB
          CheckBox CheckBox1 = (CheckBox)e.Row.FindControl("CheckBox1");
          CheckBox1.Checked = DataBinder.Eval(e.Row.DataItem, "CHECK_COLUMN").ToString() == "Y"; // Or any other value that works like true/false
      }
  }
  
  protected void ConfirmButton_Click(object sender, EventArgs e)
  {
      string id = ((Button)sender).CommandArgument; // Get the ID column value
  
      // Update the CHECK_COLUMN value on the DB or do whatever you want with the ID...
  
      BindData(); // Method that do the GridView DataBind after the changes applied to the DB
  }
  </code></pre>
  
  <p><strong>Some things to know</strong></p>
  
  <p>1) The <code>ModalPopupExtender1</code> control is inside the GridView TemplateField because it needs to have access to the <code>CheckBox1</code> and its click event. It's probably not the best solution ever, but it works and so it would not affect to much on performance if your GridView is not too complicated and if it is paged.</p>
  
  <p>2) In order to catch the <code>ConfirmButton</code> Click event, you have to remove the <code>OKControlID</code> property from the <code>ModalPopupExtender</code> control settings.</p>
  
  <p>-- END</p>
  
  <p>-- <strong>Updated on 22/05/2013</strong></p>
  
  <p>Then <strong>I need the ID of the corresponding row</strong> to make an UPDATE on the DB.</p>
  
  <p>-- END</p>
  
  <p><strong>This is the GridView</strong></p>
  
  <pre><code>&lt;asp:GridView ID="gvDocs" runat="server" CssClass="grid" AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true"
  OnPageIndexChanging="gvDocs_PageIndexChanging"
  OnSorting="gvDocs_Sorting"
  OnRowDataBound="gvDocs_RowDataBound"&gt;
  &lt;AlternatingRowStyle CssClass="grid_row_alternate"/&gt;
  &lt;HeaderStyle CssClass="grid_header" /&gt;
  &lt;RowStyle CssClass="grid_row" /&gt;
  &lt;SelectedRowStyle CssClass="grid_row_selected" /&gt;
  &lt;Columns&gt;
      &lt;asp:BoundField DataField="ID_DOCUMENTO" Visible="False"/&gt;
      &lt;asp:BoundField DataField="NUM_PROT" SortExpression="NUM_PROT" HeaderText="N. Prot." /&gt;
      &lt;asp:BoundField DataField="DATE_PROT" SortExpression="DATE_PROT" HeaderText="Data Prot." /&gt;
  
      ... some other BoundFields ...
  
      &lt;asp:TemplateField HeaderText="Da archiviare" SortExpression="DA_ARCHIVIARE"&gt;
          &lt;ItemStyle HorizontalAlign="Center"/&gt;
          &lt;ItemTemplate&gt;
              &lt;asp:CheckBox ID="chkArchiviare" runat="server" AutoPostBack="True" OnCheckedChanged="chkArchiviare_CheckedChanged"/&gt;
          &lt;/ItemTemplate&gt;
      &lt;/asp:TemplateField&gt;
  &lt;/Columns&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>And this is the ModalPopup block</strong></p>
  
  <pre><code>&lt;asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"&gt;
  &lt;/asp:ToolkitScriptManager&gt;
  
  &lt;asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True" TargetControlID="panModalPopup" PopupControlID="panModalPopup" OkControlID="btnConferma" CancelControlID="btnAnnulla" /&gt;
  
  &lt;asp:Panel ID="panModalPopup" runat="server" style="display:none; width:400px; background-color:White; border-width:2px; border-color:Black; border-style:solid; padding:20px;"&gt;
      Are you sure?
      &lt;br /&gt;&lt;br /&gt;
      &lt;div style="text-align:right;"&gt;
          &lt;asp:Button ID="btnConferma" runat="server" Text="Conferma" OnClick="btnConferma_Click"/&gt;
          &lt;asp:Button ID="btnAnnulla" runat="server" Text="Annulla" OnClick="btnAnnulla_Click" /&gt;
      &lt;/div&gt;
  &lt;/asp:Panel&gt;
  </code></pre>
  
  <p>Now, <strong>I want to show the ModalPopup each time a checkbox is checked/unchecked</strong> and that popup have to show a confirmation message with 2 buttons: Confirm and Cancel.
  Confirm have to do an update on the DB and then postback.
  Cancel have only to hide the popup without postback.</p>
  
  <p>I know that ModalPopupExtender listens to OnClick events. So, do I necessary need a Button, LinkButton, ImageButton, etc. or can I do what I want?</p>