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);

Solution

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");

Comments

[Anirudh]

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

[James Johnson]

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.

[Anirudh]

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

[James Johnson]

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.

[Anirudh]

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?

[James Johnson]

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.

[Anirudh]

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.

[Anirudh]

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

[James Johnson]

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

[Anirudh]

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

[James Johnson]

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

[Anirudh]

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

[Anirudh]

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.

[James Johnson]

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.

[Anirudh]

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>.