Replace buttoncolumn "Delete" with a Image Button in Gridview - asp.net

Question

This is my Gridview code
<asp:DataGrid id="dg" runat="server" ondeletecommand="Delete_Item" >
<columns>
<asp:buttoncolumn buttontype="LinkButton" commandname="Delete" text="Remove" />
</columns>
<HeaderStyle BackColor="#95C736" ForeColor="White" Font-Bold="True" />
</asp:DataGrid>
I want to replace my buttoncolumn with an image, what must I do to my GridView?

Answer 1

I would use a template column for this:
<asp:DataGrid ID="DataGrid1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<asp:ImageButton ID="btnDelete" runat="server" ImageUrl="/images/delete.png" CommandName="Delete" />
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>

Answer 2

Replace the Button Column with a TemplateColumn with allows you to put standard asp controls inside. Then you can handle the Datagrid_ItemCommand event normally.
<asp:DataGrid ID="dgTest" runat="server">
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<asp:ImageButton ID="ibtnDelete" runat="server" CommandName="cmdDelete"
ImageUrl="~/images/delete.png" />
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
The ItemCommand handler would be something like:
Protected Sub dgTest_ItemCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles dgTest.ItemCommand
If (e.CommandName = "cmdDelete") Then
Response.Write("the command argument was :" & e.CommandArgument)
End If
End Sub
The only other thing you would need to do is bind some data to the image button for a command argument. I usually do something like:
Protected Sub dgTest_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles dgTest.ItemDataBound
If (e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem) Then
Dim di As FAQTable = e.Item.DataItem
DirectCast(e.Item.FindControl("ibtn"), ImageButton).CommandArgument = di.FAQID
End If
End Sub
You could also use an asp:image control with an asp:Hyperlink control to get the same results.

Answer 3

One thing I just did that worked awesome is to put encoded html into the text. Text="<img src='images/btn-find.png' class='ttip' alt='View Details' />" This let me know only put in the img src, but also specify a class and an alt tag.
All you need to do is use single tick marks and encode your <> with gt and lt.