Using GridView controls to display data in ASP.NET
Part three of an eight-part series of blogs

The gridview control is at the heart of every ASP.NET webpage, displaying rows of data and allowing you to add, edit and delete records. This lengthy blog explains how to master this complex control.

  1. An introduction to GridView Controls
  2. Traps to Avoid when using Gridviews
  3. Creating GridView Controls (this blog)
  4. Formatting Gridviews
  5. Template Fields / Template Columns
  6. Conditional formatting (RowDataBound Events)
  7. You clicked on a Gridview? The RowCommand Event
  8. Sorting a Gridview

This blog is part of a larger online ASP.NET online tutorial.  Wise Owl's main business is running classroom-based training courses - have a look at our other .NET courses.

Posted by Andy Brown on 24 September 2012

You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.

Creating GridView Controls

This part of the blog shows you the basics of creating a gridview: the following part shows how to format a gridview.

Creating the Basic Gridview 

It's easy enough to create a gridview:

Starting gridview in HTML view

Just start typing a gridview control to create one!


Every gridview that you ever create will have a few basic attributes:

Gridview with a few attributes set

Every gridview should have an ID value, and its columns should be set manually.

If you allow ASP.NET to generate columns automatically,  it will plonk your database fields in order from left to right, giving you no control over their format. 

Manually Listing Columns

The easiest way to include columns in a gridview is to specify bound columns (ie columns which show the value of fields in an underlying table):

Gridview in HTML with two columns

In addition to text fields, you can display hyperlinks, images and check boxes.

Each bound field will typically have the following attributes:

Attribute Notes
DataField Which field from the underlying data to display.
HeaderText What to display at the top of the column.

So the example above would display a basic grid of data like this:

Basic gridview with 2 columns

What you would see for the above HTML if you base the gridview on data including a TaskName and StatusName field.


Populating the Gridview with Data 

Using the class from the previous blog on data classes in ASP.NET, we can populate the gridvew when the page loads to make sure the TaskName and StatusName fields are available.  First we need a stored procedure:



-- list tasks





s.SortOrder AS StatusSortOrder


tblTask AS t

INNER JOIN tblStatus AS s

ON t.StatusId=s.StatusId


t.TaskId DESC

You can now attach code to the event which happens when you load the web page.  Here's how to do this in VB:

Protected Sub Page_Load(sender As Object,

e As System.EventArgs) Handles Me.Load

'only load gridview data once

If Not Page.IsPostBack Then

'show tasks for given criteria

Dim spTaskList As New clsSpQuery("spTaskList")

Dim dtTask As DataTable = spTaskList.DtSelectedRecords

gv.DataSource = dtTask


End If

End Sub

To get this working, you must reference the System.Data namespace at the top of your page code, otherwise ASP.NET won't find the DataTable reference:

Imports System.Data

Here's how to do the same thing in C#.  First reference the System.Data namespace:

using System.Data;

Now you can attach code to the page's load event: 

protected void Page_Load(object sender, EventArgs e)


// only load gridview's data once

if (!this.IsPostBack)


// show tasks for given criteria

clsSpQuery spTaskList = new clsSpQuery("spTaskList");

DataTable dtTask = spTaskList.DtSelectedRecords;

gv.DataSource = dtTask;





There's a long way still to go with our gridview.  Before we start looking at how to interact with it, however, let's get formatting gridviews out of the way. 

This blog has 0 threads Add post