Displaying Data in a DataGrid Control

asp.net.ph

Home > Data Access in Web Forms > Displaying Information From a Database > Displaying Data in a DataGrid

Displaying Data in a DataList Control Displaying Data in a GridView Control

The <asp:DataGrid> control displays tabular data and optionally supports selecting, sorting, paging and editing the data.

By default, DataGrid generates a bound column for each field in the data source ( AutoGenerateColumns=true ).

Each field in the data is rendered in a separate column, in the order it occurs in the data. Field names appear in the grid’s column headers, and values are rendered in text labels. A default format is applied to non-string values.

You can also specify which columns appear in the DataGrid.

The following examples demonstrate how to access an SQL Server™ database that contains book titles and several key pieces of information about each book, and then displays the data using a DataGrid control, in the columns you specify.

NOTE: This sample illustrates using the SQL Server™ .NET Data Provider, though the same concepts apply to the corresponding OLEDB classes as well.

Import the proper namespaces into your page. This provides your code with access to the necessary classes.
```
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
```
NOTE: This example uses methods described in Calling Data Functions in Code Behind to connect and bind to a DataSource.
In the <head> of the Web Forms page, declare a reference to the script file which contains the data access functions.
```
<script language="C#" runat="server" src="~/shared/fetchData_sql.cs" />
```
Implement a Page_Load function within another <script runat="server"> code declaration block, essentially to do the following:
1. define the SQL query to use to fetch the data
2. fetch results of the query into a DataReader
3. bind the DataGrid to the DataReader
This is shown in the following steps.
```
<script language="C#" runat="server">
   void Page_Load ( object src, EventArgs e ) {
```
Define the SQL Select query to fetch the data from the Titles table.
```
      string query = "SELECT * FROM Titles";
```
Set the DataSource of the DataGrid control ( herein codenamed myGrid ) to the output of the fetchReader method, which returns the result of the query command in the form of a DataReader.
```
      myGrid.DataSource = fetchReader ( query );
```
Bind the DataGrid to the DataReader.
```
      myGrid.DataBind ( );
```
Close the script.
```
   }
</script>
```

Within the <body> of the Web Forms page, declare the opening tag of the DataGrid control with the following properties, setting it up to display the columns you define.

<body>
<asp:datagrid id="myGrid" runat="server"
   width="92%" cellpadding=5
   headerstyle-backcolor="lightsteelblue"
   headerstyle-font-bold
   itemstyle-verticalalign="top"
   autogeneratecolumns=false>

Set up the contents of each column using the DataGrid Columns property. In this case we are using a TemplateColumn along with several BoundColumns. Note that only the item in the template column uses a databinding expression; the bound columns use the value of the field specified in the DataField property for each item in the column.

   <columns>
      <asp:templatecolumn>
         <itemtemplate>
            <a href='details_title.aspx?id=<%# Eval ( "title_id" ) %>’>
               <img width=60 align="top" alt="Click for details" border=0
                  src='<%# Eval ( "title_id", "/shared/images/title-{0}.gif" ) %>’>
            </a>
      </asp:templatecolumn>

      <asp:boundcolumn headertext="Title"
         datafield="title" />
      <asp:boundcolumn headertext="Notes"
         datafield="notes" />
      <asp:boundcolumn headertext="Publication"
         datafield="pubdate"
         dataformatstring="{0:d}" />
      <asp:boundcolumn headertext="Price"
         datafield="price"
         dataformatstring="{0:c}"
         itemstyle-horizontalalign="right" />
   </columns>

NOTE: To avoid errors, the databinding expression must be written as a single line without any line breaks. The code examples shown here are done so only for readability.

Declare the closing tag of the DataGrid control and close the page.
```
</asp:datagrid>
</body>
```

The below example shows a similar example but using instead an SqlDataSource control to connect to a data source.

Within the <body> of the Web Forms page, declare an <asp:sqldatasource> control with the following properties.

<asp:sqldatasource id="titles" runat="server"
   selectcommand = "SELECT * FROM Titles"
   connectionstring = "<%$ ConnectionStrings:aspnet %>"
   datasourcemode = "DataReader" />

Set up the DataGrid control as in the first example above, but specify a DataSourceId to link the DataGrid to the <asp:sqldatasource> control, and thus bind to the database defined in the data source control.
```
<asp:datagdrid id="myGrid" runat="server"
   datasourceid="titles">
```
To display the data, set up the contents of each DataGrid item as described in the first example above.

For more information, see Working with the DataGrid Control.

Displaying Data in a DataList Control Displaying Data in a GridView Control

Suggested Reading

© 2025 Reynald Nuñez and asp.net.ph. All rights reserved.

If you have any question, comment or suggestion
about this site, please send us a note