Creating GridView Columns Dynami
Creating GridView Columns Dynamically (Part 1)
Introduction
Many months back I wrote three articles -
Creating
DataGrid Programmatically,
Creating DataGrid Templated Columns Dynamically - Part I and
Creating
DataGrid Templated Columns Dynamically - Part II. Even today these are
amongst top viewed articles. This indicates how commonly developers need to
create grid controls dynamically. Beginning with this article I am starting a
series that will show you how to create data bound controls such as GridView and
DetailsView programmatically. To begin with Part 1 shows how to add bound fields
and command fields to a GridView. The GridView thus created is fully functional
with paging, sorting and editing features.
Creating a sample web site
To begin with create a new web site in Visual Studio. Drag and drop a
GridView control and an SqlDataSource control on the default web form. Do not
set any property of either controls at design time. We will be doing that via
code.
Now key in the following code in the Page_Load event handler.
protected void Page_Load(object sender, EventArgs e)
{
SqlDataSource1.ConnectionString =
@"data source=.;initial catalog=northwind;integrated security=true";
SqlDataSource1.SelectCommand =
"select employeeID,FirstName,LastName from employees";
SqlDataSource1.UpdateCommand =
"update employees set firstname=@FirstName,lastname=@LastName
where employeeid=@EmployeeID";
SqlDataSource1.UpdateParameters.Add("@FirstName", "");
SqlDataSource1.UpdateParameters.Add("@LastName", "");
SqlDataSource1.UpdateParameters.Add("@EmployeeID", "");
if (!IsPostBack)
{
GridView1.DataSourceID = "SqlDataSource1";
GridView1.AutoGenerateColumns = false;
GridView1.DataKeyNames = new string[] { "EmployeeID" };
GridView1.AllowPaging = true;
GridView1.AllowSorting = true;
GridView1.PageSize = 5;
BoundField bf1 = new BoundField();
BoundField bf2 = new BoundField();
BoundField bf3 = new BoundField();
bf1.HeaderText = "Employee ID";
bf1.DataField = "EmployeeID";
bf1.ReadOnly = true;
bf1.SortExpression = "EmployeeID";
bf2.HeaderText = "First Name";
bf2.DataField = "FirstName";
bf2.SortExpression = "FirstName";
bf3.HeaderText = "Last Name";
bf3.DataField = "LastName";
bf3.SortExpression = "LastName";
CommandField cf = new CommandField();
cf.ButtonType = ButtonType.Button;
cf.ShowCancelButton = true;
cf.ShowEditButton = true;
GridView1.Columns.Add(bf1);
GridView1.Columns.Add(bf2);
GridView1.Columns.Add(bf3);
GridView1.Columns.Add(cf);
}
}
The code is dissected in the following sections
Configuring the SQL data source control
The code sets the ConnectionString property SQL data source control to
required database connection string. In our example we will be using Employees
table of Northwind database. Then SelectCommand and UpdateCommand properties are
set to corresponding SELECT and UPDATE queries. The UPDATE query is important.
Note that the names of the parameters specified in UPDATE statement are matching
the table column names. The UPDATE statement contains three parameters - @FirstName,
@LastName and @EmployeeID. These parameters are then added to the
UpdateParameters collection.
Configuring the GridView control
The GridView control uses SqlDataSource1 as its data source. This is
indicated by setting the DataSourceID property of GridView. Further some
properties of GridView are set. Note that you need to set these properties only
once and hence they come inside the "if" condition. The AutoGenerateColumns
property indicates whether to generate GridView columns automatically. We set
this property to false as we wish to add them via code. The DataKeyNames
property is a string array specifying the primary key columns. The AllowPagng
and AllowSorting properties enable paging and sorting feature respectively. The
PageSize property sets the page size to 5.
Creating Bound Fields
The GridView control can contain many types of columns such as BoundField,
HyperLinkField and TemplateField. In this example we will be using BoundField
columns. We need three bound fields for EmployeeID, FirstName and LastName
respectively. A bound field is represented by a class called BoundField. The
HeaderText property of BoundField class indicates the column heading. The
DataField property indicates the name of the table column that you wish to
display in the bound field. The SortExpression property governs if that bound
field will be sortable or not. If you set the SortExpression property to a
column name then the bound field will be sortable based on that column. Since
EmployeeID bound field represents primary key we set its ReadOnly property to
true. This way it won't be editable.
In order to provide editing feature you need to add a CommandField column to
the GridView. The ButtonType property of CommandField class indicates the type
of button to render. Possible values are Button, LinkButton and ImageButton. The
ShowCancelButton and ShowEditButton properties decide if the Edit and Cancel
buttons will be displayed.
Once we create the columns they need to be added to the Columns collection of
GridView.
That's it! If you run the web form then it should look as shown below:

You can now test GridView features such as paging sorting and editing.