ASP.NET How to show AjaxControlToolkit Modal Popup from CheckBox

Question

I need to show an AjaxControlToolkit ModalPopupExtender control, when user checks/unchecks a CheckBox control that is inside a GridView as a TemplateField.

-- Updated on 24/05/2013

See final solution here...

We finally solved the problem. So I decided to post here the complete solution and the final code.

The GridView

<asp:GridView ID="gvDocs" runat="server" CssClass="grid" AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true"
OnPageIndexChanging="gvDocs_PageIndexChanging"
OnSorting="gvDocs_Sorting"
OnRowDataBound="gvDocs_RowDataBound">
<AlternatingRowStyle CssClass="grid_row_alternate"/>
<HeaderStyle CssClass="grid_header" />
<RowStyle CssClass="grid_row" />
<SelectedRowStyle CssClass="grid_row_selected" />
<Columns>
    <asp:BoundField DataField="ID"/>
    <asp:BoundField DataField="COLUMN_A" SortExpression="COLUMN_A" HeaderText="COLUMN_A" />
    <asp:BoundField DataField="COLUMN_B" SortExpression="COLUMN_B" HeaderText="COLUMN_B" />

    <!-- TemplateField with the CheckBox and the ModalPopupExtender controls -->

    <asp:TemplateField HeaderText="Check" SortExpression="CHECK_COLUMN">
        <ItemStyle HorizontalAlign="Center"/>
        <ItemTemplate>
            <asp:CheckBox ID="CheckBox1" runat="server"/>

            <!-- Modal Popup block -->

            <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground" DropShadow="True" TargetControlID="CheckBox1" PopupControlID="panModalPopup" CancelControlID="CancelButton"/>
            <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;">
                Are you sure?
                <br /><br />
                <div style="text-align:right;">
                    <asp:Button ID="ConfirmButton" runat="server" Text="Confirm" OnClick="ConfirmButton_Click" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ID") %>'/>
                    <asp:Button ID="CancelButton" runat="server" Text="Cancel"/>
                </div>
            </asp:Panel>
        </ItemTemplate>
    </asp:TemplateField>
</Columns>

The code behind

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
}

Some things to know

1) The ModalPopupExtender1 control is inside the GridView TemplateField because it needs to have access to the CheckBox1 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.

2) In order to catch the ConfirmButton Click event, you have to remove the OKControlID property from the ModalPopupExtender control settings.

-- END

-- Updated on 22/05/2013

Then I need the ID of the corresponding row to make an UPDATE on the DB.

-- END

This is the GridView

<asp:GridView ID="gvDocs" runat="server" CssClass="grid" AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true"
OnPageIndexChanging="gvDocs_PageIndexChanging"
OnSorting="gvDocs_Sorting"
OnRowDataBound="gvDocs_RowDataBound">
<AlternatingRowStyle CssClass="grid_row_alternate"/>
<HeaderStyle CssClass="grid_header" />
<RowStyle CssClass="grid_row" />
<SelectedRowStyle CssClass="grid_row_selected" />
<Columns>
    <asp:BoundField DataField="ID_DOCUMENTO" Visible="False"/>
    <asp:BoundField DataField="NUM_PROT" SortExpression="NUM_PROT" HeaderText="N. Prot." />
    <asp:BoundField DataField="DATE_PROT" SortExpression="DATE_PROT" HeaderText="Data Prot." />

    ... some other BoundFields ...

    <asp:TemplateField HeaderText="Da archiviare" SortExpression="DA_ARCHIVIARE">
        <ItemStyle HorizontalAlign="Center"/>
        <ItemTemplate>
            <asp:CheckBox ID="chkArchiviare" runat="server" AutoPostBack="True" OnCheckedChanged="chkArchiviare_CheckedChanged"/>
        </ItemTemplate>
    </asp:TemplateField>
</Columns>

And this is the ModalPopup block

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True" TargetControlID="panModalPopup" PopupControlID="panModalPopup" OkControlID="btnConferma" CancelControlID="btnAnnulla" />

<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;">
    Are you sure?
    <br /><br />
    <div style="text-align:right;">
        <asp:Button ID="btnConferma" runat="server" Text="Conferma" OnClick="btnConferma_Click"/>
        <asp:Button ID="btnAnnulla" runat="server" Text="Annulla" OnClick="btnAnnulla_Click" />
    </div>
</asp:Panel>

Now, I want to show the ModalPopup each time a checkbox is checked/unchecked 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.

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?

Answer 1

You are right, it listens to onclick events, but client-side ones, so, the target control of the extender can be anything you can click on, even a div or a label.

Answer 2

try to show/hide ModalPopupExtender1 from chkArchiviare_CheckedChanged event like this.

ModalPopupExtender1.show();

and

ModalPopupExtender1.hide();

take one Hidden button and make it as TargetControlID like this.

<asp:HiddenField ID="btnHiddenDtl1" runat="Server" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True" TargetControlID="btnHiddenDtl1" PopupControlID="panModalPopup" OkControlID="btnConferma" CancelControlID="btnAnnulla" />

you need not to call cancel button click event to hide ModalPopupExtender1.

Answer 3

You no need to include ModalPopup Extender inside your GridView. You can bind check box control in template field in GridView and use OnCheckedChanged property in it...So template would be like below

 <asp:TemplateField HeaderText="Da archiviare" SortExpression="DA_ARCHIVIARE">
    <ItemStyle HorizontalAlign="Center"/>
    <ItemTemplate>
        <asp:CheckBox ID="chkArchiviare" runat="server" 
             OnCheckedChanged="chkArchiviare_CheckedChanged"/>
    </ItemTemplate>
</asp:TemplateField>

After this you have to call show function on chkArchiviare_CheckedChanged event...like this

  ModalPopupExtender1.Show();

Here ModalPopupExtender1 is ID of you ModalPopupExtender control.

One more thing you have to remember use one button on .aspx page. And pass this button ID into ModalPopupExtender TargetControlID... Like this

 <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True"  
      TargetControlID="btnShowModalPopup" PopupControlID="panModalPopup" 
      OkControlID="btnConferma" CancelControlID="btnAnnulla" />

 <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;"> Are you sure?<br /><br />
   <div style="text-align:right;">
    <asp:Button ID="btnConferma" runat="server" Text="Conferma" 
         OnClick="btnConferma_Click"/>
    <asp:Button ID="btnAnnulla" runat="server" Text="Annulla" 
         OnClick="btnAnnulla_Click" />
   </div>
 </asp:Panel>

Here Why Iam using this button?....There is no use of this button because we are using show() in codebehind...but if we are not pass button Id to ModapPopupExtender TargetControlId property. It will give you an error.

So using ModalPopupExtender in this way...you can use it with LinkButton, Label, Button. For more details with example, you can check the below link....

How to Use ModalPopup Extender into GridView

I hope this article will clear your all doubts....Enjoy and share this with others...Thanks!