Get Checked rows of a nested Gridview on button click - asp.net

I have nested a Gridview2(child) and I want to get the checked rows on a button click.
When I try to access Gridview2 from button click event I am not able to do that. However, I can access the parent Gridview1.
Can somebody explain me how to get the Child Gridview's checked rows on button click.
Also, Button is a column header of child Gridview.
Here is my code.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px"
CellPadding="3" GridLines="Horizontal"
onrowdatabound="GridView1_RowDataBound" DataKeyNames="id1">
<AlternatingRowStyle BackColor="#F7F7F7" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<a href="javascript:collapseExpand('id1_<%# Eval("id1") %>');">
<img id="imageSubId_<%# Eval("id1") %>" alt="Click to show/hide orders" border="0"
src="Images/bullet_toggle_plus.jpg" /></a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="id1" HeaderText="ID" />
<asp:TemplateField>
<ItemTemplate>
<tr>
<td colspan="100%">
<div id="rid1_<%# Eval("id1") %>" style="display: none; position: relative; left: 25px;">
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" CellPadding="4" ForeColor="#333333"
GridLines="None" OnRowCommand="Gridview2_RowCommand">
<Columns>
<asp:BoundField DataField="fname" HeaderText="First Name" />
<asp:BoundField DataField="mname" HeaderText="Middle Name" />
<asp:BoundField DataField="lname" HeaderText="Last Name" />
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="checkselect" runat="server" />
</ItemTemplate>
<HeaderTemplate>
<asp:Button ID="Button4" runat="server" Text="Remove" CommandName="Split" OnClick="Button4_Click" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button4" PopupControlID="Panel1" CancelControlID="Button1">
</ajaxToolkit:ModalPopupExtender>
</HeaderTemplate>
</asp:TemplateField> </Columns></asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

What I'd do is add a CommandArgument to Button4's declaration that will allow me to find the related GridView2.
So, I'd use what you're using elsewhere, id1. Add CommandArgument='<%# Eval("id1") %>' to your Button4 declaration.
Now, in Button4_Click, you can cast the sender to a Button like so:
var button4 = (Button)sender;
Once you have button4 casted correctly to a Button, you can access the CommandArgument property.
var id1 = button4.CommandArgument;
Once you have id1, it's as simple as iterating through the parent GridView, GridView1. Looks like your second column is bound to id1 as well, so you'd do the following:
GridView foundGridView2;
foreach(GridViewRow gvr in GridView1.Rows)
{
if(gvr.RowType == DataControlRowType.DataRow && gvr.Cells[1].Text == id1)
{
foundGridView2 = gvr.FindControl("GridView2");
break; // Once we've found it, no need to iterate through other items
}
}
At this point, you now have access to your found GridView2, and you can iterate through the rows of GridView2 and check the checkboxes. Let me know if you need help doing that.
Adding to the answer because I think the parent GridView1 may be swallowing Button4's click:
Create an event handler for GridView1's OnRowCommand event.
In the resulting GridView1_RowCommand() method, use the following to handle JUST your Button4 Click event:
if(e.CommandName == "Split")
{
// At this point I would refactor out the code you put in Button4_Click
// into a separate method. I'll give you an example:
HandleButton4Click(e.CommandArgument); // e.CommandArgument will contain the id1
}

Related

How to make a TemplateField read-only until the edit button is pressed?

I have a GridView with various fields, one of which I have used TemplateFields for in order to have a datepicker in it. I've set the GridView to be editable and for all the other fields, this works great and they stay locked until the edit button is pressed.
Unfortunately, the TemplateField stays editable at all times. I want them to stay readonly until 'Edit' is clicked.
Some code to illustrate what I'm doing.
default.aspx
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
AllowSorting="True" AutoGenerateEditButton="True"
OnPreRender="GridView1_PreRender"
CssClass="gvdatatablem, table table-striped table-bordered"
DataKeyNames="fmatter" PageSize="25">
<Columns>
<asp:TemplateField HeaderText="Letter Sent">
<ItemTemplate>
<asp:TextBox ID="udtltrsent" runat="server" ReadOnly="false" Class='datepicker' ></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:CheckBoxField DataField="uheld" HeaderText="Held"
SortExpression="uheld" />
<asp:BoundField DataField="udtresponse" HeaderText="Response"
SortExpression="udtresponse" />
<asp:BoundField DataField="clname1" HeaderText="clname1"
SortExpression="clname1" readonly="true" />
</Columns>
</asp:GridView>
Javascript at the bottom to implement Datatables and Bootstrap datepicker
<script type="text/javascript">
$(document).ready(function () {
$('#example').DataTable();
$('.datepicker').datepicker();
});
</script>
Also the GridView1_PreRender method is just to change the table format, for Datatables to work
protected void GridView1_PreRender(object sender, EventArgs e)
{
if (GridView1.Rows.Count > 0)
{
//Replace the <td> with <th> and adds the scope attribute
GridView1.UseAccessibleHeader = true;
//Adds the <thead> and <tbody> elements required for DataTables to work
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
//Adds the <tfoot> element required for DataTables to work
//GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
}
The solution worked for me is Use label in ItemTemplate and Keep EditItemTemplate for Textboxes. After Edit get that textbox date to label text.
<Columns>
<asp:TemplateField HeaderText="Letter Sent">
<ItemTemplate>
<asp:Label ID="lbldate" runat="server" ></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="udtltrsent" runat="server" Class='datepicker' ></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
</Columns>

Get data from the row of a Dropdown in a Gridview

I have a Gridview with a column that has a DropDownList.
I've binded this Dropdownlist with an event on the "SelectedIndexChanged".
The problem is i can't get the value of a label of another column in the same row.
The code is the next:
protected void grid_OnSelectedIndexChanged(object sender, EventArgs e)
{
grdCredenciales.DataBind();
var dropdown = (DropDownList)sender;
var row = (GridViewRow)dropdown.NamingContainer;
var label = (Label)row.FindControl("lblMatricula");
var value = label.Text; // I get "" in this line.
}
And in the grid i have:
<asp:ObjectDataSource ID="CredencialesDS" runat="server" />
<asp:GridView ID="grdCredenciales" runat="server" BackColor="White" DataSourceID="CredencialesDS"
CssClass="DDGridView" RowStyle-CssClass="td" HeaderStyle-CssClass="th" CellPadding="6" AllowSorting="True"
AllowPaging="True" AutoGenerateColumns="False" PageSize="10" OnRowDataBound="grdCredenciales_OnRowDataBound">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:Label ID="Label7" ToolTip="MatrĂ­cula" runat="server" Text="MatrĂ­cula"/>
</HeaderTemplate>
<HeaderStyle HorizontalAlign="Left" Width="15%"/>
<ItemStyle HorizontalAlign="Left" />
<ItemTemplate>
<asp:Label ID="lblMatricula" runat="server"><%# Eval("Matricula") %></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:Label ID="Label19" ToolTip="Estado" runat="server" Text="Estado" />
</HeaderTemplate>
<HeaderStyle HorizontalAlign="Left" Width="15%"/>
<ItemStyle HorizontalAlign="Left" />
<ItemTemplate>
<asp:DropDownList runat="server" ID="dpEstadoCredencial" AutoPostBack="True" OnSelectedIndexChanged="grid_OnSelectedIndexChanged" CssClass="comboEstado"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I don't know why, but label.text returns an empty string. As you can see, i am calling the DataBind before, so the label should have a value at this point.
Do you know how can i get the value i need from the label in another column?
Thanks for everyone.
Check the GridView's DataSource before you do the DataBind(). Since you're missing the full ASPX markup, I'm not sure if you're setting the data source programmatically or with a SqlDataSource.
In any case, what will happen often with programmatically-set Data Sources is that they disappear on a PostBack, and when you call that DataBind, you're really DataBinding it to null, which would explain why you're getting string.Empty ("") for the Label's Text property.
Just verified the code provided by you. It's working completely.
Please make sure in the RowDataBound event of Grid View, you reattach the dropdownlist's SelectedIndexChanged event as below:
protected void CustomersGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (Page.IsPostBack)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
DropDownList ddl = e.Row.FindControl("dropdown1") as DropDownList;
if (ddl != null)
{
ddl.SelectedIndexChanged += new EventHandler(CustomersGridView_SelectedIndexChanged);
}
}
}
}
Also, I used the same code as yours in SelectedIndexChanged event. I'm putting here my aspx Markup:
<asp:gridview id="CustomersGridView"
datasourceid="CustomersSqlDataSource"
autogeneratecolumns="false"
runat="server"
OnRowDataBound="CustomersGridView_RowDataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Label runat="server" ID="Label2" Text='<%# Bind("ID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:DropDownList ID="dropdown1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="dropdown1_SelectedIndexChanged">
<asp:ListItem Text="Cat"></asp:ListItem>
<asp:ListItem Text="dog"></asp:ListItem>
<asp:ListItem Text="Mouse"></asp:ListItem>
<asp:ListItem Text="pig"></asp:ListItem>
<asp:ListItem Text="snake"></asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:gridview>
Please provide your GridView markup too for checking.

ASP.NET How to show AjaxControlToolkit Modal Popup from CheckBox

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?
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.
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.
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!

Delete from GridView in ModalpopupExtender

I have a ModalPopupExtender which is, among other things, populated with a gridview (From a DataTable).
In this GridView I have a deletebutton attached to each row, which is supposed to delete the row. Is it anyway possible to delete the selected row from the datatable, and then update the GridView without closing the ModalPopupExtender?
Here is my GridView:
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupDragHandleControlID="divPopupReport" TargetControlID="btnHidden" PopupControlID="divPopupReport" CancelControlID="btnCloseReport" BackgroundCssClass="modalBackground"></ajaxToolkit:ModalPopupExtender>
<asp:UpdatePanel runat="server" ID="upReport">
<ContentTemplate>
<div id="divPopupReport" runat="server" style="text-align:left; padding-right:0px; background-color:White; border: 2px solid #87d000; display:none;" >
<asp:GridView ID="GridView2" runat="server" CssClass="list listExtended"
DataKeyNames="DocumentGuid" Width="100%" OnRowCommand="GridView2_RowCommand" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="DocumentName" HeaderText="Dokumentname">
<ItemStyle CssClass="list"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="CardName" HeaderText="Reference">
<ItemStyle CssClass="list"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="DocumentDate" HeaderText="Date">
<ItemStyle CssClass="list"></ItemStyle>
</asp:BoundField>
<asp:TemplateField HeaderText="">
<ItemStyle CssClass="list" />
<ItemTemplate>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="">
<ItemStyle CssClass="list" />
<ItemTemplate>
<asp:ImageButton ID="btnDelete" CssClass="image" runat="server" CommandName="Delete" CommandArgument='<%# Eval("DocumentGuid") %>' ImageUrl="~/delete.gif" Width="16" Height="16" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
And below my RowCommand.
protected void GridView2_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Delete")
{
DataTable SelectedDataTable = Session["SelectedDataTable"] as DataTable;
string guid = Convert.ToString(e.CommandArgument);
DataRow[] dr = SelectedDataTable.Select("DocumentGuid = '" + guid + "'");
SelectedDataTable.Rows.Remove(dr[0]);
Session["SelectedDataTable"] = SelectedDataTable;
GridView2.DataSource = SelectedDataTable;
GridView2.DataBind();
}
}
You need to wrap an UpdatePanel around the grid. This should solve the problem.
Another option is to use ajax.
Using Javascript/JQuery to remove the table row manually in combination with a WebMethod:
http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/
Another easy solution is to re-show the popup after post back.
Swap upReport panel with divPopupReport div (i.e. place upReport UpdatePanel into divPopupReport div).

PopUpExtender on ImageButton inside GridView problem

I have GridView on my asp.net page, one column in that grid is ImageButton (TemplateField with ID="imbReserve"). On click on that button I want to show PopUp, but when I put TargetControlId="imbReserve" I get error message " A control with ID 'imbReserve' could not be found". How to achieve this, on click on button inside Grid show PopUp ?
Have a look at these 2 articles, that just helped me out with this problem
Article 1: A More Traditional approach
The Following is paraphrased from the above article
The Page Code:
<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false"
Width="95%">
<Columns>
<asp:TemplateField >
<ItemTemplate>
<asp:Button ID="btnViewDetails" runat="server" Text="Details" OnClick="BtnViewDetails_Click" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="customerid" HeaderText="ID" />
<asp:BoundField DataField="companyname" HeaderText="Company" />
<asp:BoundField DataField="contactname" HeaderText="Name" />
<asp:BoundField DataField="contacttitle" HeaderText="Title" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<ajaxToolKit:ModalPopupExtender
ID="mdlPopup" runat="server" TargetControlID="pnlPopup" PopupControlID="pnlPopup"
CancelControlID="btnClose" BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlPopup" runat="server" Width="500px" style="display:none">
<asp:UpdatePanel ID="updPnlCustomerDetail" runat="server" UpdateMode="Conditional">
<ContentTemplate>
[Your Content Here]
</ContentTemplate>
</asp:UpdatePanel>
<div align="right" style="width:95%">
<asp:Button
ID="btnSave" runat="server" Text="Save" />
<asp:Button ID="btnClose" runat="server" Text="Close" Width="50px" />
</div>
</asp:Panel>
Note that the GridView is wrapped in an update panel also that the Target Control ID for the Modal Extender is the same as the Pop Up Control ID. This is because the ModalPopUp Extender needs a target control ID and I think this solution is a better plan than using a hidden button.
Now For the Code Behind:
protected void BtnViewDetails_Click(object sender, EventArgs e)
{
// Do Anything you need to the contents of the update panel
// update the contents in the detail panel
this.updPnlCustomerDetail.Update();
// show the modal popup
this.mdlPopup.Show();
}
Article 2:Uses Clientside Javascript
The Following is paraphrased from the above article
The client side Javascript
<script type="text/javascript">
// keeps track of the delete button for the row
// that is going to be removed
var _source;
// keep track of the popup div
var _popup;
function showConfirm(source){
this._source = source;
this._popup = $find('mdlPopup');
// find the confirm ModalPopup and show it
this._popup.show();
}
function okClick(){
// find the confirm ModalPopup and hide it
this._popup.hide();
// use the cached button as the postback source
__doPostBack(this._source.name, '');
}
function cancelClick(){
// find the confirm ModalPopup and hide it
this._popup.hide();
// clear the event source
this._source = null;
this._popup = null;
}
Page Code:
<asp:GridView ID="gvToDoList" runat="server" AutoGenerateColumns="false" >
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Item" HeaderText="Description" />
<asp:BoundField DataField="IsCompleted" HeaderText="Complete?" />
<asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px" >
<ItemTemplate>
<asp:Button ID="btnDelete" runat="server"
OnClientClick="showConfirm(this); return false;"
OnClick="BtnDelete_Click" Text="Delete" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<ajaxToolKit:ModalPopupExtender BehaviorID="mdlPopup" runat="server"
TargetControlID="div" PopupControlID="div"
OkControlID="btnOk" OnOkScript="okClick();"
CancelControlID="btnNo" OnCancelScript="cancelClick();"
BackgroundCssClass="modalBackground" />
<div id="div" runat="server" align="center" class="confirm" style="display:none">
<img align="absmiddle" src="Img/warning.jpg" />Are you sure you want to delete this item?
<asp:Button ID="btnOk" runat="server" Text="Yes" Width="50px" />
<asp:Button ID="btnNo" runat="server" Text="No" Width="50px" />
</div>
Again note that the Target Control ID for the Modal Pop Up Extender is the same as the Pop Up Control ID. Also note the OnClientClick attribute on the button in the template field, make sure your include "return false;".
All that is needed in the code behind it the onClick (or onCommand) event handler to do what you need to do.
I've tried both of these approaches successfully.
Hope one of these two works for you.
The problem is related to the fact that the real ID is getting changed when the page get rendered to the client.
Open your page source in the browser and look at the ID that is generated from asp.net. Then use that ID inside the TargetControlID property
This kind of problem is present with all the templated controls in ASP.NET
A cleaner way will be to bind the TargetControlID property of the ModalPopupExtendr on Page Load where you can use the ClientID property dinamically generated
modalPopupExtender.TargetControlID = myTemplateControl.ClientID;

Resources