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?

score 4 · Accepted Answer · answered May 21 '13 at 15:42

4

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.

answered May 21 '13 at 15:42

AGuyCalledGerald

7,882
17
73
120

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? – Cheshire Cat May 22 '13 at 10:23
you need to put the modalpopup and panel into the gridview item template, i´m sure – AGuyCalledGerald May 22 '13 at 11:24
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 May 22 '13 at 12:42
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. – Cheshire Cat May 22 '13 at 12:46
Yes, you are right, but I think you cannot connect modal controls outside a gridview with controls inside a gridview. – AGuyCalledGerald May 22 '13 at 13:00
You need to catch the RowCommand-event of the gridview. http://stackoverflow.com/questions/10970501/asp-net-c-sharp-gridview-buttonfield-onclick-event – AGuyCalledGerald May 22 '13 at 13:03
2

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 May 22 '13 at 13:13
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? – Cheshire Cat May 22 '13 at 13:38
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/30417/discussion-between-aguycalledgerald-and-rainbowcoder) – AGuyCalledGerald May 22 '13 at 13:45

SanketS · Answer 2 · 2013-05-22T10:18:54.173

0

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.

edited May 22 '13 at 10:18

answered May 21 '13 at 17:19

SanketS

963
1
13
36

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();`. – Cheshire Cat May 21 '13 at 17:42
put CancelControlID="Cancel button name" property in your ModalPopupExtender1 tag. it will automatically close your ModalPopupExtender1. – SanketS May 22 '13 at 08:51
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. – Cheshire Cat May 22 '13 at 10:08
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 May 22 '13 at 10:22
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". – SanketS May 22 '13 at 10:55
I used the solution posted by @AGuyCalledGerald that seems fine for my case. Thanks anyway! – Cheshire Cat May 22 '13 at 13:20

score 0 · Answer 3 · answered Jun 27 '13 at 08:39

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!

ASP.NET How to show AjaxControlToolkit Modal Popup from CheckBox

3 Answers3

Linked