Introduction:
I have been receiving a lot of emails asking
how can I display an image into one of the column of the GridView control. In
this article I will show you that how easy it is to display the images into the
GridView column.
Setting up the Database Table:
Check out the image below to have a better idea
of the database table.
As, you can see that I have use the relative
path instead of the actual physical path of the images. All the images are
stored inside the Images directory which is contained inside the application
virtual directory. Hence, the path of the images might look something like
/MyApplication/Images/Image1.jpg.
Populating the GridView Control:
The next step is to populate the GridView
control with data as well as images. Take a look at the code below which is used
to populate the GridView.
|
private
void
BindData() {
SqlConnection myConnection =
new
SqlConnection(ConnectionString);
SqlDataAdapter ad =
new
SqlDataAdapter("SELECT
UserID, FirstName, LastName,Url FROM Users",
myConnection);
DataSet
ds = new
DataSet();
ad.Fill(ds);
GridView1.DataSource = ds;
GridView1.DataBind();
} |
As, you can see the above code is pretty
straight forward and you might have done this thousand of times. Now, let's see
how we can display the images into the GridView control.
Display Images into the GridView Control:
The first thing you need to do is to add a
template column in the GridView control. Once, you have added the template
column simply add an Image server control inside the template column. The HTML
code of the GridView will look something like the following code:
| <asp:GridView
ID="GridView1"
runat="server"
AutoGenerateColumns="False"
BackColor="White"
BorderColor="#CC9966"
BorderStyle="None"
BorderWidth="1px"
CellPadding="4">
<Columns>
<asp:BoundField
DataField="UserID"
HeaderText="UserID"
/>
<asp:BoundField
DataField="FirstName"
HeaderText="First
Name"
/>
<asp:TemplateField
HeaderText="Image">
<ItemTemplate>
<asp:Image
ID="Image1"
ImageUrl='<%#
(string) FormatImageUrl( (string) Eval("Url")) %>'
runat="server"
/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle
BackColor="#FFFFCC"
ForeColor="#330099"
/>
<RowStyle
BackColor="White"
ForeColor="#330099"
/>
<SelectedRowStyle
BackColor="#FFCC66"
Font-Bold="True"
ForeColor="#663399"
/>
<PagerStyle
BackColor="#FFFFCC"
ForeColor="#330099"
HorizontalAlign="Center"
/>
<HeaderStyle
BackColor="#990000"
Font-Bold="True"
ForeColor="#FFFFCC"
/>
</asp:GridView>
|
I have made the Image tag bold in the
above code so you will easily identify it. Next thing we need to see is the
purpose of the FormatImageUrl method which is used to assign the correct url to
the ImageUrl property of the Image control.
|
protected
string FormatImageUrl(string
url) {
if
(url != null
&& url.Length > 0)
return
("~/"
+ url);
else
return
null;
} |
The purpose of "~/" is to map the
url relative to the root. This means that the Image control will look for the
ImageUrl starting from the root of the website.
Now, if you run your application provided that
there are images in the directory which you are using you will see image column
in the GridView control just like shown below:
Please feel free to download the the source
code at the end of this article.
I hope you liked the article! happy coding.