All geek questions in one place

ASP.NET How to show AjaxControlToolkit Modal Popup from CheckBox

I need to show the AjaxControlToolkit ModalPopupExtender control when the user checks / deletes control of the CheckBox, which is inside the GridView as a TemplateField.

- Updated 05/24/2013

See the final decision here ...

Finally, we solved the problem. So I decided to post here the complete solution and the final code.

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

 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 located inside the GridView TemplateField because it must have access to CheckBox1 and the click event. This is probably not the best solution, but it works, and therefore it will not affect performance if your GridView is not too complicated and if it is unloaded.

2) To catch the ConfirmButton Click event, you need to remove the OKControlID property from the ModalPopupExtender control ModalPopupExtender .

- END

- Updated 05/22/2013

Then I need the identifier of the corresponding row to do the UPDATE in the database.

- END

This is a 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 ModalPopup every time the checkbox is checked / unchecked , and this popup should display a confirmation message with two buttons: Confirm and Cancel. Confirm that you need to do the update in the database, and then send it back. To cancel, you only need to hide the pop-up window without postback.

I know that ModalPopupExtender listens for OnClick events. So, do I need a button, LinkButton, ImageButton, etc. Or can I do what I want?

+2
source share
3 answers

You are right, he listens to onclick events, but client events, so the target expander control can be anything you can click on, even a div or label.

+4
source

try to show / hide ModalPopupExtender1 from chkArchiviare_CheckedChanged, for example.

 ModalPopupExtender1.show();

and

 ModalPopupExtender1.hide();

take one hidden button and make it like TargetControlID as follows.

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

you do not need to call a button cancel event to hide ModalPopupExtender1 .

0
source

You do not need to include the ModalPopup Extender inside your GridView. You can link the checkbox in the template field in the GridView and use the OnCheckedChanged property in it ... So, the template will look 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 that, you should call the show function in the chkArchiviare_CheckedChanged event ... like this

  ModalPopupExtender1.Show();

Here, ModalPopupExtender1 is the identifier of your ModalPopupExtender control.

Another thing you should remember is using a single button on the .aspx page. And pass this button ID to 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 am I using this button? .... This button is not used because we use show () in codebehind ... but if we do not pass the button identifier to the ModapPopupExtender TargetControlId property. This will give you an error message.

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

How to use ModalPopup Extender in a GridView

I hope this article clears your doubts ... Enjoy and share it with others ... Thank you!

0
source

Source: https://habr.com/ru/post/1208823/

More articles:


All Articles