how to have one of the column in gridview to be an image?

Question

I have a gridview that gets created in codebehind.

In the below code, I would like to have 3rd column to be some image (Example: PDF icon or similar).

I am thinking Type.GetType needs to be changed for column named "Image"??

DataTable dt = new DataTable();
GridView gview = new GridView();
DataRow dr;
DataColumn dc = new DataColumn("Description", Type.GetType("System.String"));
dt.Columns.Add(dc);
dc = new DataColumn("Image", Type.GetType("System.String"));
dt.Columns.Add(dc);
dc = new DataColumn("Size (MB)", Type.GetType("System.String"));
dt.Columns.Add(dc);
{
    dr = dt.NewRow();
    dr["Description"] = item["Name"];
    dr["Size (MB)"] = item["Size"];
    dr["Image"] = "pdf.gif"; // put complete reference here,
    dt.Rows.Add(dr);
}
gview.DataSource = dt;
gview.DataBind();
Controls.Add(gview);

Paske

Answer 1

Just store the image URL in the DataTable rather than the actual image. Then, use a TemplateField in your GridView and put an Image in the ItemTemplate:

<asp:TemplateField>
    <ItemTemplate>
        <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ImageUrlColumn") %>' ... />
    </ItemTemplate>
</asp:TemplateField>

You can also use an ImageField:

<asp:ImageField DataImageUrlField="ImageNameColumn" DataImageUrlFormatString="/images/{0}"></asp:ImageField>

EDIT

When declaring columns, try this instead:

dt.Columns.Add("Image", typeof(string));

And to set the value of the image column, try this:

dr.SetField<string>("Image", "img.png");

Grube

I could not follow completely. Where do I need to define ImageUrlColumn? Is it the column name I am defining in codebehind? – Paske

Instead of trying to store an image in the DataTable, just store the path to the image, i.e. /images/somepic.png. The ImageUrlColumn is only intended to demonstrate the idea. – Grube

I am storing the path only (as posted in first post) and the path will have some folder like you mentioned. I am still not getting why I need to have the templatefield/itemfield that you mentioned and if required where to associate it in the gridview. please clarify. thanks – Paske

You need the template field to display the image in the GridView. You can also use an ImageField too, if you'd rather. See edited answer for how to use an ImageField. – Grube

so in ASPX I put <asp:ImageField DataImageUrlField="ImageNameColumn" DataImageUrlFormatString="/images/pdf.png"></asp:ImageField> and then in code behind I associate dr["Image"] = this.ImageNameColumn; Did I follow correctly? – Paske

DataImageUrlFormatString is expecting a format string, not an actual image name. If you're storing the whole path in the datacolumn, you probably don't even need to use the DataImageUrlFormatString. – Grube

I had tried with dr["Image"] = "\images\pdf.gif" but it is giving error. I thought it could be because of of TYPE defination in "dc = new DataColumn("Image", Type.GetType("System.String"))"? I will be hardcoding the image and hence I don't think it is necessary to use temlatefield or imagefield? Please suggest. – Paske

"dr.SetField<string>("Image", "img.png")" gives error as there is no SetField available for "dr". – Paske

What version of ASP.NET are you using? You must be using 2.0 or earlier, huh? – Grube

Visual studio shows .NET framework version 3.5 SP1. Seems the site is running ASP.NET as 2.0.50727 – Paske

Go into the properties of your project and change the target framework to 3.5 or above and my suggestion should work. – Grube

Changed ther framework and tested the code. No errors but the Image column in the grid shows "img.png" but not the actual image. I want it to show the actual image under IMAGE column in the grid. Please suggest – Paske

I didn't add this line in ASPX page "<asp:ImageField DataImageUrlField="ImageNameColumn" DataImageUrlFormatString="/images/{0}"></asp:ImageField>"... Let me know if it needs to be added. I don't think it is required. – Paske

You're going to have to use either a TemplateField or an ImageField to display your image in the GridView. Not sure what more I can say really... everything you need is in the answer. – Grube

Considering the suggested changes made in the aspx.cs, what should be the equivalent changes required in aspx? The column used in the grid is named "Image". I tried this and no success. <asp:ImageField DataImageUrlField="ImageNameColumn" ></asp:ImageField>. – Paske

Answer 2

In grid view put command field column like the following

<asp:CommandField runat="server" ShowDeleteButton="true" ButtonType="Image" DeleteImageUrl="images/delete.png" ></asp:CommandField>

set the gridview property like the following

AutoGenerateDeleteButton="false"

Modulate

Answer 3

Another way is to enable in your DataGrid the RowDataBound Event. Then set in the event the wire up for each new row to your image.

protected void GridView1_RowDataBound(object sender, GridViewRowWEventArgs e)
{
    if(e.Row.RowType == DataControlRowType.DataRow)
    {
        //Setup in your image column index. By Example setting 0
        e.Row.Cells[0].Text=Server.HtmlDecode(@"<img src=""./Images/pdf.gif"" />");
    }
}

Billiton