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?

Solution

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.

Comments

[Cheshire Cat]

Oh nice! I'll give a try! Thanks!

[Cheshire Cat]

I did it but whenever the popup shows it "freezes" so even if I click on the Cancel button, it won't hide. I made a Cancel_Click(object sender, EventArgs e) event where I call ModalPopupExtender1.hide();.

[SanketS]

put CancelControlID="Cancel button name" property in your ModalPopupExtender1 tag. it will automatically close your ModalPopupExtender1.

[Cheshire Cat]

As you can see above on the code block, there's CancelControlID="btnAnnulla" that is the name of the button control, but it doesn't work.

[SanketS]

please see my Edited answer.

[Cheshire Cat]

Maybe I found the problem... I put the TargetControlID="panModalPopup" and also PopupControlID="panModalPopup". So the target control that should activate the modal popup was the popup itself... Anyway, if I put TargetControlID="chkArchiviare" that is the name of my CheckBox control inside the GridView I get a runtime error by AjaxControlToolkit that says: "The TargetControlID of ModalPopupExtender1 is not valid. Unable to find control with ID = chkArchiviare". Is perhaps due to the fact that the GridView will be generated after the initialization event of the ModalPopup?

[Cheshire Cat]

I put TargetControlID="chkArchiviare" that is the name of my CheckBox control on the GridView but I get a runtime error by AjaxControlToolkit that says: "The TargetControlID of ModalPopupExtender1 is not valid. Unable to find control with ID = chkArchiviare". Any ideas?

[SanketS]

you need to give TargetControlID="hiddenbuttonID" not TargetControlID="chkArchiviare" you will not found chkArchiviare control of gridview in ModelPopUp. so i have told you to take extra hiddenbutton for TargetControlID and set it as TargetControlID="hiddenbuttonID". Donot put TargetControlID="chkArchiviare".

[AGuyCalledGerald]

you need to put the modalpopup and panel into the gridview item template, i´m sure

[Cheshire Cat]

Yes, that seems to be the way. But I've two questions: 1) Is it correct to put the ModalPopup and the Panel with the buttons on the TemplateField? Wouldn't they be initialized once per row? 2) On my page I've a "master" GridView with the CheckBox that have to show the ModalPopup but also a "detail" GridView under the first one, that appears when user click the ROWID. That detail GridView has the same CheckBox column that should has the same behavior of the other. Do I need to put another ModalPopup block with it's own panel and buttons?

[Cheshire Cat]

Also, what is the event that I can catch for the OK button click on the modal popup? I tried with OnClick="btnConferma_Click" that is the OnClick event of the OK button but it isn't.

[AGuyCalledGerald]

Yes, you are right, but I think you cannot connect modal controls outside a gridview with controls inside a gridview.

[AGuyCalledGerald]

You need to catch the RowCommand-event of the gridview. stackoverflow.com/questions/10970501/…

[Cheshire Cat]

Made it! :-) You have to remove the OKControlID on the ModalPopupExtender definition, so the OK button can fire the event OnClick as per normal and you can catch it with a `Button_OnClick' and then do a PostBack. Thanks!

[Cheshire Cat]

I used the solution posted by @AGuyCalledGerald that seems fine for my case. Thanks anyway!

[Cheshire Cat]

I forgot something... I need to get the ID of the row where the CheckBox was checked/unchecked to update the corresponding field on the DB. How can I retrieve it?

[AGuyCalledGerald]

let us continue this discussion in chat