BLOGS BY TOPIC
BLOGS BY AUTHOR
BLOGS BY YEAR
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.
- An introduction to GridView Controls
- Traps to Avoid when using Gridviews
- Creating GridView Controls (this blog)
- Formatting Gridviews
- Template Fields / Template Columns
- Conditional formatting (RowDataBound Events)
- You clicked on a Gridview? The RowCommand Event
- Sorting a Gridview
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:
Just start typing a gridview control to create one!
Every gridview that you ever create will have a few basic attributes:
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):
In addition to text fields, you can display hyperlinks, images and check boxes.
Each bound field will typically have the following attributes:
|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:
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:
CREATE PROC spTaskList
-- list tasks
s.SortOrder AS StatusSortOrder
tblTask AS t
INNER JOIN tblStatus AS s
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
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:
Here's how to do the same thing in C#. First reference the System.Data namespace:
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
// 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.