[Translation] dynamically create a column in the GridView (Part 1)

Original address: http://www.dotnetbips.com/articles/displayarticledetails.aspx? Articleid = 520
[Source code download]
[Download the source code after the translator changes it]

[Translation] dynamically create a column in the GridView (Part 1)

Original article released on: 2006.10.27
Author: Bipin Joshi
Translation: webabcd

Introduction
I wrote three articles a few months ago: dynamically create columns for the DataGrid, dynamically create the template column of the DataGrid (1), and dynamically create the template column of the DataGrid (2 ). Even today, these articles are still the top ones in the rankings. This shows that many developers need to dynamically create the gird control. Starting from this article, I will write a series of articles about how to create data binding controls such as the GridView and DetailsView. The first section of this article describes how to add bind fields and command fields to implement more functions, such as paging, sorting, and editing.

Create a web site instance
Create a web site in Visual Studio. Drag a GridViw control and a SqlDataSource control to the default webform. Do not set any properties of the control during the design phase. We will implement its functions through encoding.

The following code in the Page_Load event is provided: 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.performanceid = "sqlperformance1 ";
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 );
}
}

Next we will explain the code step by step.

Configure the SQL data source control.
This Code sets the ConnectionString attribute, which is used to configure the required database connection string for the SQL data source control. In our example, we will use the Employees table in the Notthwind database. Set the select and update statements for the SelectCommand and UpdateCommand attributes. The update statement is very important. Note that the parameter names listed in the update statement must match the names of columns in the data table. The update statement contains three parameters: @ FirstName, @ LastName, and @ EmployeeID. These parameters are then added to the UpdateParameters set.

Configure the GridView Control
The GridView control uses sqlperformance1 as its data source. The code shows how to set the performanceid attribute of the GridView. Set more GridView attributes. Note that you only need to set these attributes once in the "if" condition. The AutoGenerateColumns attribute specifies whether the columns in the GridView are automatically created. This attribute should be set to false because we want to add columns by encoding. The DateKeyNames attribute is a string array of a keyword column. The AllowPaging and AllowSorting attributes correspond to the paging and sorting properties respectively. The PageSize attribute sets the page size to 5.

Create a BoundFiled Column
The GridView control contains columns of the BoundField, HyperLinkField, and TemplateField types. In this example, we will use the BoundField column. We need to provide three BoundFiled columns for EmployeeID, FirstName, and LastNam respectively. A bound filed is created by declaring BoundField. The HeaderText attribute of BoundField is used to indicate the column title. Whether the SortExpression attribute is given determines whether the bound filed can be sorted. If the SortExpression attribute is set to the name of a column, bound field sorts the column based on this attribute. The EmployeeID column is displayed as a keyword. Therefore, you must set its ReadOnly attribute to true, which means that the column cannot be edited.

To provide the editing feature, you need to add a CommandField column to the GridView. Its ButtonType attribute is used to specify the form in which a Button is presented. Its possible values include Button, LinkButton, and ImageButton. The ShowCancelButton and ShowEditButton attributes determine whether to display the edit and cancel buttons.

Once we create columns, they will add corresponding columns to the GridView.

This article ends now! If you run this webform, it will be shown as follows.

You can test the pagination, sorting, and editing attributes of the GridView.

Author: Bipin Joshi
Email: http://www.dotnetbips.com/contact.aspx
Overview: Bipin Joshi is the administrator of DotNetBips.com. He is the initiator of http://www.binaryintellect.com/. he is the training and consulting service of this company's .net framwork. He provides developers with training in Mumbai, India. He is also a member of Microsoft MVP (ASP. Net) and ASPInsiders.