ASP.NET GridView Tutorial

Displaying images in asp.net gridview using templatefield – Part 30

Link for csharp, asp.net, ado.net, dotnet basics and sql server video tutorial playlists
http://www.youtube.com/user/kudvenkat/playlists

Link for text version of this video
http://csharp-video-tutorials.blogspot.com/2013/03/displaying-images-in-aspnet-gridview.html

In this video we will discuss about displaying images in gridview control. There are 2 ways display images in gridview.
Using TemplateField
Using ImageField

In this video, we will discuss about using TemplateField and in our next vidoe we will discuss about using ImageField.

We will be using tblEmployee table for this demo. Please use the sql script below, to create and populate the table.

Create Table tblEmployee
(
EmployeeId int primary key identity,
Name nvarchar(50),
Gender nvarchar(20),
City nvarchar(50),
PhotoPath nvarchar(100)
)

Insert into tblEmployee values(‘Mark’,’Male’,’London’,’Images/Mark.png’)
Insert into tblEmployee values(‘John’,’Male’,’Chennai’,’Images/John.png’)
Insert into tblEmployee values(‘Mary’,’Female’,’New York’,’Images/Mary.png’)
Insert into tblEmployee values(‘Mike’,’Male’,’Sydeny’,’Images/Mike.png’)

Create an asp.net web application. Add a class file with name EmployeeDataAccessLayer.cs.

Drag and drop gridview control on WebForm1.aspx. Copy and paste the following code in WebForm1.aspx.cs.
protected void Page_Load(object sender, EventArgs e)
{
GridView1.DataSource = EmployeeDataAccessLayer.GetAllEmployees();
GridView1.DataBind();
}

Add a folder with Name=”Images” to your web application. Copy and paste any 4 images into “Images” folder. The names of the images must match with what we have in the database.
1. Mark.png
2. John.png
3. Mary.png
4. Mike.png

Run the application, and notice that the image path is displayed in the gridview instead of displaying images.

Add 4 BoundFields and 1 TemplateField to GridView control.

Please note the following
1. The templatefield is used to display photos of employees.
2. In the ItemTemplate we are using Image control.
3. The “ImageUrl” property is set to “Photo” property of “Employee” object.
4. To control the size of the image in GridView control, set the Width and Height properties. We have set them to 100X100 pixels.
5. Finally set GridView1 control’s AutoGenerateColumns property to “False”