This tutorial introduces you to the DataGrid control. It tells you about the BoundColumn and shows an example of how to use it.

The DataGrid control, similar to the DataList control but with more features, bounds data and displays it in a grid.

We shall begin with just displaying the records from the database MyDB (which we used in several tutorials, here at Geekpedia and which was created in the tutorial named ‘Connecting to a SQL database from ASP .NET I’).

Anyway, for setting up fast a connection to the SQL database from the ASP .NET Web Application use the following code inside WebForm1.aspx.cs:

Inside the public class named WebForm1:

// Here's what we need to establish the connection

protected System.Data.SqlClient.SqlConnection sqlConnection1;

protected System.Data.SqlClient.SqlCommand sqlSelectCommand1;

protected System.Data.SqlClient.SqlDataReader sqlDataReader1;

Inside InitializeComponent() – after you expand the region:

this.sqlSelectCommand1 = new System.Data.SqlClient.SqlCommand();

this.sqlConnection1 = new System.Data.SqlClient.SqlConnection();

this.sqlSelectCommand1.CommandText = "SELECT * FROM dbo.MyLinks";

this.sqlSelectCommand1.Connection = this.sqlConnection1;

this.sqlConnection1.ConnectionString = "workstation id=WORKSTATION;packet size=4096;user id=aspnet;data source=WORKSTATION;persist security info=True;initial catalog=MyDB;password=secret";

// This line was already there

this.Load += new System.EventHandler(this.Page_Load);

On the web form (design mode of WebForm1.aspx) drag a DataGrid control:

Now go to the C# code file (WebForm1.aspx.cs) and inside Page_Load() use the following code:

private void Page_Load(object sender, System.EventArgs e)

{

// Open the connection to the database

sqlConnection1.Open();

// Set the DataSource to the result of the Select command

DataGrid1.DataSource = sqlSelectCommand1.ExecuteReader();

// Bind the DataGrid

DataGrid1.DataBind();

// Close the connection to the database

sqlConnection1.Close();

}

Here we simply bind the control to the database, and if you compile now you’ll see the result in the browser:

The bind was successful. The title of the columns in the DataGrid is the actual name of the columns inside the database (Title and URL).

Yet we didn’t used any of the features of the DataGrid, and that’s what we’re going to do next.

DataGrid columns
The BoundColumn

BoundColumn is the column that displays the records inside a DataGrid. This is the default column type. You don’t have to specify any BoundColumns to display the columns inside the database as they are generated automatically. But if you do specify the columns, you need to set an attribute for the <asp:DataGrid> tag that sets the auto generation of columns to false.

Let’s do this – go into the HTML code of WebForm1.aspx and inside the form tag of Form1 use the following code:

<asp:DataGrid id="DataGrid1" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" runat="server" AutoGenerateColumns="False">

<Columns>

<asp:BoundColumn DataField="Title" HeaderText="Title" />

<asp:BoundColumn DataField="URL" HeaderText="Link" />

</Columns>

</asp:DataGrid>

First you can notice the attribute called AutoGenerateColumns which is set to False, that’s because we want to create our own columns.

Then, inside the <Columns> tag we create two BoundColumns and we specify to each of them, the DataField (which is actually the column name from the database) and HeaderText – the text which appears above the column.

Here’s the result in the browser: