<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField HeaderText="ProductID" />
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

Now to display images. Here in the database,only the file names is there and hence if the images are in some directory, you have to somehow pre pend it with the filename.Here i am using the appsettings in web.config to provide the path of the images directory.

<appSettings>
<add key="IMG" value="http://your full path"/>
</appSettings>

Now to the C# code for populating the GridView. Here is the entire method i created for binding this GridView.

private void bindGrid()
{
string strconn= ConfigurationManager.ConnectionStrings["YourConnectionString"].ConnectionString;
SqlConnection con = new SqlConnection(strconn);
con.Open();
string cmdText = "Select productId,Filename from Images"
SqlCommand cmd = new SqlCommand(cmdText, con);
cmd.CommandType = CommandType.Text;
DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
GridView1.DataSource = dt;
GridView1.DataBind();

for (int i = 0; i < dt.Rows.Count; i++)
{
GridView1.Rows[i].Cells[0].Text = dt.Rows[i]["ProductId"].ToString();
GridView1.Rows[i].Cells[2].Text = dt.Rows[i]["Filename"].ToString();
Image PImage = (Image)GridView1.Rows[i].FindControl("Image1");
PImage.ImageUrl = ConfigurationManager.AppSettings["IMG"].ToString() + dt.Rows[i]["FileName"].ToString();
}
con.Close();
}

Though this method will be slow if you want to populate huge amount of data, it is quite effective. Now here in the first line, i am taking the connection string from the web.config.The next few steps are self explanatory as you can see.You may be wondering why i have binded the Grid and after that i am populating it again. That is because, when the for loop runs, if the GridView is not binded, the Index was out of range index error will be shown.
Now in the for loop, the first cell, which contains the bound field, text is set to the ImageId. The second line in the loop, we are finding the image control we had added before as the template field in the GridView.”Image1″ is the ID of the Image Control.Now all that is remaining is setting the ImageUrl property of the found image control. Before that we prepend the FileName with the directory path.

Hope this helps.As i said, this method may be slow if you have many images to be populated.

Table name:- country_lloyd
CountryId int
CountryName varchar(50)

Table name:- Student
Id int
Name varchar(50)
CountryId int

2)
• Add a gridview (GridView1) to the page “Default.aspx”.
• It is filled with two fields, name and country name (for this an inner join is used),set the “Id” of the Student as datakey.How to set a dataKey??
• Remove “AutoGenerate Columns” of gridview.
• Add two bound fields convert it to template field.
• Add a Command Field “Edit Update Cancel”.

How to bind the values from the table to a “Template column” in the GridView???

1. Firstly “Edit templates” of the gridview (GridView1).Now in the “ItemTemplate” of Column [0]-Name drag and drop a label(name it “Label1”).And in the “ItemTemplate” of Column[1]-Country drag and drop another label(name it “lblCountry”).
2. Now in the “Edit Item Template” of Column [1]-Country drag and drop a dropdownlist (name it “ddl_CountryList”).
3. Now “End Template Editing”.
4. Now go to the html section of your page(“Default.aspx”),there you can find the html code of the gridview and the 3 controls we dragged in to the gridview, Now just check my code (“Default.aspx”) to understand what you need to do.This is how a value field is bound to a template column(Text=’<%# Bind(“Name”) %>’)

“Never loose faith if you find this a bit confusing, go on you will understand it.”

“Default.aspx”

<asp:GridView ID=”GridView1″ runat=”server” AutoGenerateColumns=”False”
DataKeyNames=”Id” onrowcancelingedit=”GridView1_RowCancelingEdit”
onrowediting=”GridView1_RowEditing” onrowupdating=”GridView1_RowUpdating”>
<Columns>
<asp:TemplateField HeaderText=”Name”>
<ItemTemplate>
<asp:Label ID=”Label1″ runat=”server” Text=’<%# Bind(“Name”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”Country”>
<EditItemTemplate>
<asp:DropDownList ID=”ddl_CountryList” runat=”server”>
</asp:DropDownList>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID=”lblCountry” runat=”server” Text=’<%# Bind(“CountryName”) %> ‘></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowEditButton=”True” />
</Columns>
</asp:GridView>

Given below is the code segment of the “Default.aspx” page.
“Default.aspx.cs”

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
DBAccess dba = new DBAccess();
void FillGrid()
{
dba.GetTable(“select s.Name,s.Id,cl.CountryName from Student s inner join country_lloyd cl on cl.CountryId = s.CountryId”);
GridView1.DataSource = dba.dt;
GridView1.DataBind();
}
void fillCombo(DropDownList ddl)
{
dba.GetTable(“select * from country_lloyd”);
ddl.DataSource = dba.dt;
ddl.DataTextField = dba.dt.Columns[1].ToString();
ddl.DataValueField = dba.dt.Columns[0].ToString();
ddl.DataBind();
ListItem lstItem = new ListItem(“select”, “0″);
ddl.Items.Insert(0, lstItem);
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
FillGrid();
}

}
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
string countryname = ((Label)GridView1.Rows[e.NewEditIndex].FindControl(“lblCountry”)).Text.ToString();
GridView1.EditIndex = e.NewEditIndex;
FillGrid();

DropDownList ddlCountryName = (DropDownList)GridView1.Rows[e.NewEditIndex].FindControl(“ddl_CountryList”);
fillCombo(ddlCountryName);
ddlCountryName.SelectedIndex = ddlCountryName.Items.IndexOf(ddlCountryName.Items.FindByText(countryname));

}
protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
GridView1.EditIndex = -1;
FillGrid();
}
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
DropDownList ddlCountryName = (DropDownList)GridView1.Rows[e.RowIndex].FindControl(“ddl_CountryList”);
string str= ddlCountryName.SelectedItem.Value.ToString();
string str1 = GridView1.DataKeys[e.RowIndex].Value.ToString();
dba.ExecuteQuery(“update Student set CountryId=’”+str+”‘ where Id=’”+ str1 +”‘”);
GridView1.EditIndex = -1;
FillGrid();
}
}

Notes:
1) FillGrid() is method to fill the grid with values.
2) void fillCombo(DropDownList ddl) is to fill the dropdownlist inside the gridview.
3) DBAccess() is the class used for database connection.
4)GridView row editing,row upadating,row canceling events for explained in the “gridview edit update cancel” post

Declare as global or in the BLL(if you are using N-Tier Structure)
public static DataTable TempTable;

Global Varaible
DataRow Dtr;

Create Structure of the datatable

private void CreateStructure()
{
TempTable = new DataTable(“DatatableName”);
TempTable.Columns.Add(“ColumnName”, typeof(datatype));//eg-TempTable.Columns.Add(“Name”, typeof(string))
..add more..
}

Now to Fill the GridView

private void FillGrid()
{
Dtr = TempTable.NewRow();
Dtr["ColumnName"] = Textbox1.text;
..add the rest..
TempTable.Rows.Add(Dtr);
GridView1.DataSource = TempTable;
GridView1.DataBind();
}

Call CreateStructure() at pageLoad
Call FillGrid() at the event you want,eg button_Click
Note that you have to create boundfields for the gridview,ie the datafield of each field in the gridview,as those in the createstructure()

I am posting this one with a notion that the readers do have a little bit knowledge about dot net.Hope it helps.

Pre-requisites
Add a gridview(gdvw_Sample) to your ‘Default.aspx’ page,

• Bind the gridview with values from a table in the database.
• Remove “AutoGenerate Columns” of gridview.
• Add two “boundfields”.
• Set the primary key of the table as the “datakey” of the gridview.
• Add a “command field-Edit Update Cancel”.

How to set the datakey and BoundFields???
Copying the Html code below will create a gridview with 2 boundfields Name ,Address and datakey as Id.

<asp:GridView ID=”gdvw_Sample” runat=”server” AutoGenerateColumns=”False”
DataKeyNames=”Id” onrowcancelingedit=”gdvw_Sample_RowCancelingEdit”
onrowediting=”gdvw_Sample_RowEditing” onrowupdating=”gdvw_Sample_RowUpdating”>
<Columns>
<asp:BoundField DataField=”Name” HeaderText=”Name” />
<asp:BoundField DataField=”Address” HeaderText=”Address” />
<asp:CommandField ShowEditButton=”True” />
</Columns>
</asp:GridView>

• BoundFields can be set directly from the design also ,by “edit columns” of the gridview(taken from top right corner of the gridview itself).
• Datakeys can be set from the “property”>> “DataKeyNames”.

“default.aspx.cs”
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page
{
DBAccess dbobj = new DBAccess();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
bindgridview();
}
}
protected void gdvw_Sample_RowEditing(object sender, GridViewEditEventArgs e)
{
gdvw_Sample.EditIndex = e.NewEditIndex;
bindgridview();
}

private void bindgridview()
{
dbobj.GetTable(“select * from Student”);
gdvw_Sample.DataSource = dbobj.dt;
gdvw_Sample.DataBind();
}
protected void gdvw_Sample_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
gdvw_Sample.EditIndex = -1;
bindgridview();
}
protected void gdvw_Sample_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
string t1 = ((TextBox)(gdvw_Sample.Rows[e.RowIndex].Cells[0].Controls[0])).Text.ToString();
string t2 = ((TextBox)(gdvw_Sample.Rows[e.RowIndex].Cells[1].Controls[0])).Text.ToString();
string id = gdvw_Sample.DataKeys[e.RowIndex].Value.ToString();
dbobj.ExecuteQuery(“update Student set Name=’”+t1+”‘,Address=’”+t2+”‘where Id=’”+id+”‘”);
gdvw_Sample.EditIndex = -1;
bindgridview();
}
}

Notes:
1) The method “bindgridview()” is used to bind the grid with values from a table.
2) “DBAccess” is a class wrote for accessing database.

To add this class,

Solution Explorer >>Rightclick on the website name>>Add newItem>>From the new window that opens,select CLASS,name it “DBAccess.cs”>>Paste the entire code below.

“DBAccess.cs”

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.Sql;
using System.Data.SqlClient;
using System.Data.Common;
using System.Web.Configuration;

public class DBAccess
{
public SqlConnection sqlCon = new SqlConnection();
public SqlCommand sqlCmd = new SqlCommand();
public SqlDataAdapter sqlDa = new SqlDataAdapter();
public DataTable dt;

public DBAccess()
{
sqlCon.ConnectionString = “server=.;uid=sa;pwd=admin;database=test”;
}

private SqlConnection GetConnection()
{
try
{
if (sqlCon.State == ConnectionState.Open)
{ sqlCon.Close(); }
sqlCon.Open();
}
catch (Exception ex)
{ sqlCon.Close(); }
return sqlCon;
}

public DataTable GetTable(string sql)
{
try
{
sqlCmd.Connection = GetConnection();
sqlCmd.CommandType = CommandType.Text;
sqlCmd.CommandText = sql;
sqlDa.SelectCommand = sqlCmd;
dt = new DataTable();
sqlDa.Fill(dt);
if (sqlCon.State == ConnectionState.Open)
{ sqlCon.Close(); }
}
catch (Exception ex)
{
if (sqlCon.State == ConnectionState.Open)
{ sqlCon.Close(); }
}
return dt;
}

public int ExecuteQuery(string sql)
{
int rslt = 0;
try
{
sqlCmd.Connection = GetConnection();
sqlCmd.CommandType = CommandType.Text;
sqlCmd.CommandText = sql;
rslt = sqlCmd.ExecuteNonQuery();
if (sqlCon.State == ConnectionState.Open)
{ sqlCon.Close(); }
}
catch (Exception ex)
{
if (sqlCon.State == ConnectionState.Open)
{ sqlCon.Close(); }
}
return rslt;
}
}

Notes:
1) Don’t forget to edit the connection string in the constructor portion of the “DBAccess.cs” and also the database name,uid and password of sqlserver.

The Table design for the the table used above “Student”

Id int
Name varchar(50)
Address varchar(50)