I have a page that displays a GridView containing an ImageButton TemplateField. My goal is to display an AJAX modal popup when one of those buttons are clicked, along with displaying the row where the button is pressed. The problem is that when I click on a button, it does not show the modal popup. I tried to use this tutorial and read several articles on this site about this issue but to no avail. How to properly fire the button event and show the popup?
Here is the snippet for the gridview:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
Width="505px" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="ItemDesc"
SortExpression="ItemDesc" ItemStyle-Width="100px" ItemStyle-Height="100px">
<ItemStyle Height="100px" Width="100px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="Price" SortExpression="Price"
ItemStyle-Width="100px" ItemStyle-Height="100px">
<ItemStyle Height="100px" Width="100px"></ItemStyle>
</asp:BoundField>
<asp:TemplateField>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Image ID="Image1" runat="server" Height="200px"
ImageUrl='<%# Eval("ImagePath") %>' Width="200px" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" runat="server" CommandName="atc" ImageUrl="~/App_Themes/img/shop/addtocart.png"
Text="Add to Cart" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>"/>
</ItemTemplate>
<ControlStyle Height="30px" Width="105px" />
<ItemStyle Width="105px" />
</asp:TemplateField>
</Columns>
</asp:GridView>
...
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="HiddenField1" PopupControlID="Panel1" BackgroundCssClass="modalBg" CancelControlID="btnClose">
</asp:ModalPopupExtender>
<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:Panel ID="Panel1" runat="server" Width="500" Height="500" Visible="False"
style="background-color:#6f95f4; color:#000000;">
<div class="style1">
<br />
<br />
<br />
<br />
<br />
<table style="width: 90%; height: 71px;">
<tr>
<td>
Item Name</td>
<td>
<asp:Label ID="lblItemName" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td>
Price</td>
<td>
<asp:Label ID="lblPrice" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>
Quantity</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Type="Number" Min="1" MaxLength="100"
Width="75px" Height="23px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Total Price</td>
<td>
<asp:Label ID="lblTotalPrice" runat="server" Text="Label"></asp:Label>
</td>
</tr>
</table>
<br />
<br />
<asp:Button ID="btnAddToCart" runat="server" Text="Add to Cart"
onclick="btnAddToCart_Click" />
<br />
<br />
<asp:Button ID="btnClose" runat="server" onclick="btnClose_Click" Text="Close"
Width="199px" />
</div>
</asp:Panel>
And here's my code for the event:
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName.Equals("atc"))
{
ModalPopupExtender1.Show();
//// Retrieve the row index stored in the
//// CommandArgument property.
int index = Convert.ToInt32(e.CommandArgument);
//// Retrieve the row that contains the button
//// from the Rows collection.
GridViewRow row = GridView1.Rows[index];
lblItemName.Text = row.Cells[0].Text;
lblPrice.Text = row.Cells[1].Text;
Response.Write("<script>alert('" + row.Cells[0].Text + "\n" + row.Cells[1].Text + "');</script>");
//// Add code here to add the item to the shopping cart.
}
}
EDIT: Added the panel code.
Try like this: 100% working and Tested
onrowcommand="GridView1_RowCommand" for GridViewdisplay:none for Your Panel instead of Visible="false"I Commented your alert(in rowbound) it contains js error
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="505px"
onrowcommand="GridView1_RowCommand"
>
<Columns>
<asp:BoundField DataField="ItemDesc" SortExpression="ItemDesc" ItemStyle-Width="100px"
ItemStyle-Height="100px">
<ItemStyle Height="100px" Width="100px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="Price" SortExpression="Price" ItemStyle-Width="100px"
ItemStyle-Height="100px">
<ItemStyle Height="100px" Width="100px"></ItemStyle>
</asp:BoundField>
<asp:TemplateField>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Image ID="Image1" runat="server" Height="200px" ImageUrl='<%# Eval("ImagePath") %>'
Width="200px" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" runat="server" CommandName="atc"
CausesValidation="false"
Text="Add to Cart" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" />
</ItemTemplate>
<ControlStyle Height="30px" Width="105px" />
<ItemStyle Width="105px" />
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Panel1"
PopupControlID="Panel1" OnOkScript="okClick();"
OnCancelScript="cancelClick();"
OkControlID="btnAddToCart" CancelControlID="btnClose">
</ajax:ModalPopupExtender>
<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:Panel ID="Panel1" runat="server" Width="500" Height="500"
style="background-color:#6f95f4; color:#000000;display:none">
<div class="style1">
<br />
<br />
<br />
<br />
<br />
<table style="width: 90%; height: 71px;">
<tr>
<td>
Item Name</td>
<td>
<asp:Label ID="lblItemName" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td>
Price</td>
<td>
<asp:Label ID="lblPrice" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>
Quantity</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Type="Number" Min="1" MaxLength="100"
Width="75px" Height="23px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Total Price</td>
<td>
<asp:Label ID="lblTotalPrice" runat="server" Text="Label"></asp:Label>
</td>
</tr>
</table>
<br />
<br />
<asp:Button ID="btnAddToCart" runat="server" Text="Add to Cart"
onclick="btnAddToCart_Click" />
<br />
<br />
<asp:Button ID="btnClose" runat="server" onclick="btnClose_Click" Text="Close"
Width="199px" />
</div>
</asp:Panel>
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName.Equals("atc"))
{
ModalPopupExtender1.Show();
int index = Convert.ToInt32(e.CommandArgument);
GridViewRow row = GridView1.Rows[index];
ImageButton ImageButton1=(ImageButton)row.FindControl("ImageButton1");
// Response.Write("<script>alert('" + row.Cells[0].Text + "\n" + row.Cells[1].Text + "');</script>"); comment this
}