Image in a buttoncolumn in DataGrid

Rather than have a text based button column in my Datagrid, I'd like to use icons,

What I would like is for each row to have a column with an icon in that when clicked, will process a specific bit of code relating to the row in question..

Is this possible?

yes and this is the code to do it:

Code:

---

<asp:TemplateColumn HeaderText="Picture">
      <ItemTemplate>
            <asp:Image id="img_icon" runat="server" ImageUrl='[image dir]'></asp:Image>
        </ItemTemplate>
</asp:TemplateColumn>

---

This needs to be between the Columns tags
hope this helps,

Thanks for the response Studz.

I also need the column to be clickable in the same way that a ButtonColumn is, so that I can then retrieve details for the Row that was clicked and action it.

I apologise if this is a basic question, but I am new to ASP programing - so please be patient with me.

Thanks again for the initial reply

ok you need to make the HTML code this:

Code:

---

<asp:TemplateColumn HeaderText="Picture">
      <ItemTemplate>
            <asp:ImageButton id="img_icon" onclick="[ButtonName]_Click"  runat="server" ImageUrl='[image dir]'></asp:ImageButton>
        </ItemTemplate>
</asp:TemplateColumn>

---

this goes in the VB Code:

Code:

---

Sub [ButtonName]_Click(sender As Object, e As ImageClickEventArgs)

ButtonCode

End Sub

---

hope this is more help, sorry I put an image before lol...

even if it is a basic question it needs to be asked, or you wont learn, search for my questions on here some are so simple you'll laugh yourself to death....

any I've only been doing asp.net for about 2 months

Thanks again Stdudz.

That allows me to code for the event of the image being clicked.

So far so good.

But I now would like to know what Row in the grid the button was, and then display the details of that Row on a new page.

The Data is currently bound from an XML file, and so I guess I want to pass in an index of the Row that was selected/clicked to the new page, so that it can reget that line of informatuion from the XML file, and display it accordingly.

I appreciate that I am asking a lot with your help on this, and so thanks again for taking time out to answer.

If push came to shove, I would revert back to using a buttoncommand style instead of an image, but I would still want to achieve the same thing. ie - when the button is clicked go to a new page and display details of what was on the row that was clicked.

If you know of any good online tutorials in this area, I would also appreciat that.

Thanks again

Ok, the solution to you problem here is quite simply, take what James (Studz) has said and slightly alter it to make it work like you want. Firstly take out the even handler the onClick, unless you are going to do some specific code, i.e. not releted to the clicking the the grid. Now for the buton in the template column give it a command name. See below:

Code:

---

<asp:ImageButton id="img_icon" runat="server" ImageUrl='[image dir]' CommandName="ViewData"/></asp:ImageButton>

---

Now because this item is being rendered within the Datagrid, that command will infact bubble up to the Parent Control, which is intern the datagrid. Becuase of this we can handle the actual event there. As im sure you are aware the DataGrid has an ItemCommand event, that is fired when an item within the grid which has a CommandName is activated. In this case when the Button is clicks. What you need to do is then setup the Event for the datagrid to handle this:

VB Code:

Sub [DataGrid]_ItemCommand(sender As Object, e As DataGridCommandEventArgs)
 
if e.CommandName = "ViewData" then
    ' Do what ever processing you want here
    ' If you want you can construct a query string and redirect using
    ' Response.Redirect
End if
 
End Sub

Check the code as I am a C# programming be default, what this allows use to do it check the command name that has fired in the grid and then act on it if required.

Hope this helps, if ive missed something out which I sometimes do please, reply.

Regards

Mike Bright
e-Mail ~ [email protected]

Microsoft Student Partner (UK/2004)
Microsoft Certified Professional

Thanks guys - youve been more than helpful.

My problem now is that when I redirect to the new page, I want to pass a paramater(s) over so I know what row of the datagrid is to be used to refind the relevent details in the XML file.

The new page can then reread the xmlfile, find the relevent record and display them in a non grid format.

As I see it, there is nowhere in response.redirect that will do this, so I am now looking at Server.Trasfer. and somehow using the preserveform property set as true.

Am I over complicating things? or am I on the right track?

Thanks again

Ok so use a Query String or a Session Variable. Say for example, you have clicked the button in the grid and you have got the DataKey identifier out, so for example BookNumber 6.

You would need to construct a query string to pass it:

Code:

---

Dim QueryString As String
Dim ItemCode As String
ItemCode = e.DataKey ' Cant remember exactly of the top of my head
QueryString = "ViewItem.aspx?ItemCode=" + ItemCode
Response.Redirect(QueryString)

---

This would then fire you off to the page and the url in the navigation bar would read:

http://........ WHAT EVER /ViewItem.aspx?Itemcode=6

In the next page you can then just pull the QueryString out of the Page Collection. Like So

Code:

---

Dim Code As String
Code = Request.QueryString["ItemCode"]

---

And there you have it passing the code between pages.

Thanks you and Good Night

Regards

Mike Bright
e-Mail ~ [email protected]

Microsoft Student Partner (UK/2004)
Microsoft Certified Professional