Imagebutton on a gridview

Hi All,

Having a bit of an issue with something that seems common, but I can’t figure out how to do it.

I have a gridview and an image button in first column of each autogenerated row (bound from a dataset in the codebehind)

When one of the image buttons is clicked, I need a new window to open that would give more details about one of those rows. So (somehow), I need the click event to get the values from that row and query the db for the extra detail and display in a new window.

But how do I know which button was clicked??

I’ve done this using the onclick event for the image button which called an event handler in the code behind and works perfectly. However, since onclick is server side, when I press back in the main page, it does a postback and reopens the popped up page again, and then tries to search for the session variables in the page load and fails…basically messy.

So,

I’d like to use the onclientclick event and use javascript to pop up a new window instead of the vb codebehind (which from what I read is a bad thing). I can pass the data that the popped up page should use using querystring, but how do I get the javascript to access the values in that row that was clicked?

Please help!:frowning:

I don’t usually work with webforms, and I’m not real familiar with GridView, but I did take a quick look. I saw where you could define styles for various elements and rows, but no real templating save the EmptyDataTemplate, so I’m a little confused how you got a button into a cell. Are you formatting values in onDataBind as they are being loaded or what?

Anyway, instead of using an image button (which will fire postbacks) use an anchored image: <a target=“_new” href=“detailpage.aspx?id=000” title=“Edit this Item”><img src=“edit.jpg” alt=“” /></a>

Again, I’m not real sure what events the grid exposes, but certainly one of them is an OnDataBindRow type thing, where you can examine and alter the value before it’s bound.

Or just wait around for somebody with more WebForms experience to answer.

That’s right. In the method instead of EventArgs you’ll use GridViewRowEventArgs.

Then you’ll be able to read or modify the binding row’s cells

TableCell theCellYouWant = e.Row.Cells[n];

where n is the zero based cell number.

Woo hoo! Finally got this working (almost)

I put a bit of code in the onrowcreated event handler of the gridview to populate the postbackurl of the image button

<asp:GridView ID="gvTaskRes" runat="server" AutoGenerateColumns="false" HorizontalAlign ="Justify" [B]OnRowCreated="OnRowCreated">[/B]
            <RowStyle CssClass="GridViewRowStyle"  />
            <AlternatingRowStyle CssClass="GridViewAlternatingRowStyle"  />
            <HeaderStyle CssClass="GridViewHeaderStyle" />
            <Columns>
                <asp:TemplateField>
		        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
		        <ItemTemplate>
		        <asp:ImageButton ID="Img_ID" ImageUrl="~/App_Themes/Paper/Images/det_icon.gif" Height="18px" Width = "20px" runat="server" OnClientClick="return newWindow()"/>
		        </ItemTemplate>
                </asp:TemplateField>
Protected Sub OnRowCreated(ByVal sender As System.Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)

        Try

            If gvTaskRes.Rows.Count > 0 Then
                DirectCast(gvTaskRes.Rows(intGRID).FindControl("Img_ID"), ImageButton).PostBackUrl = "Display_Details.aspx?id=" + gvTaskRes.Rows(intGRID).Cells(39).Text
                intGRID = intGRID + 1
            End If

Now that I have the postbackurl assigned to each imagebutton dynamically, i can just click it and open the new page. Now the only problem is how to use the postbackurl to open a page in a new window (wish I knew javascript…)

You don’t need code behind, just do it simple :slight_smile:

HTML code:

<asp:GridView ID="gvTaskRes" runat="server" AutoGenerateColumns="false" HorizontalAlign ="Justify" [B]DataKeyNames="ID"[/B]>
            <RowStyle CssClass="GridViewRowStyle"  />
            <AlternatingRowStyle CssClass="GridViewAlternatingRowStyle"  />
            <HeaderStyle CssClass="GridViewHeaderStyle" />
            <Columns>
                <asp:TemplateField>
		        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
		        <ItemTemplate>
		        <asp:ImageButton ID="Img_ID" ImageUrl="~/App_Themes/Paper/Images/det_icon.gif" Height="18px" Width = "20px" runat="server" OnClientClick='return newWindow([B]<%# Eval("ID")%>[/B])'/>
		        </ItemTemplate>
                </asp:TemplateField>

javascript code:


function newWindow(key)
{
            window.open('Display_Details.aspx?id=' + key,'mywindow','width=400,height=200,left=0,top=100,screenX=0,screenY=100')
}

Hope it will help you :slight_smile:

Thanks dzflip, but the problem is that I wouldn’t know ID till runtime since it is based on a value in the row that the imagebutton is in. I need to be able to dynamically create the query string, so that’s why I thought I could generate it from code behind and assign it to postbackurl.

If you find any other way to do it, please let me know

Do you create the query string for some tables or one table ? Can you post full html code of gridview and code to create query string for dataset here ?