isplaying two-dimensional table data in a grid is one of the most common programming tasks. When the number of rows is small, a single page with a scrollbar is sufficient, but when the data has many rows, it's usually better to display a few rows at a time, adding controls that give the user a way to navigate from one screenful or "page" of the records to another, a process called "paging." Having written paging functionality from scratch before the days of .NET, I was excited when Microsoft released ASP.NET and the DataGrid control. Using the ASP.NET DataGrid a programmer can easily display a grid complete with interface controls that provide paging capability using only a few lines of code. Yet as simple as that process is, I wanted a way to improve upon it
Specifically, I wanted a way to add paging to my DataGrids so that the paging mechanism worked similarly to most Web search engines. For example, if you search Google for a common word, you'll get a page with a list of matches, and at the bottom of the page you'll see a line containing paging links that let you jump to the next page or skip ahead to any of the next ten pages. Clicking your way through to, for example, the 20th page, changes the paging link scheme slightly; you'll see that the paging links now include page-numbered links for the previous 10 pages and the next 10 pages, as well as next and previous links. In this article, I'll show you how to create a simple server control so you can add this style of paging to your DataGrids.
Setting Up a DataGridPager Example
Start with a basic DataGrid on an aspx page as follows:
<asp:DataGrid Id="dgDemo" RunAt="server"
AllowPaging="True" PagerStyle-Visible="False" />
The preceding code sets the AllowPaging
attribute to True
to allow the control to page this DataGrid, and sets the PagerStyle-Visible
attribute value to False
to hide the DataGrid's built-in DataGrid paging links.
Next, add code to the code-behind file to generate a dataset of random data and bind it to the DataGrid when the page loads. Here's the code:
Protected WithEvents dgTest As DataGrid
Private Sub Page_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
If Not IsPostBack Then
Session("MyDataSet") = BuildDataSet(1000)
dgTest.DataSource = Session("MyDataSet")
Private Function BuildDataSet(ByVal NumberOfRecords _
As Integer) As DataSet
Dim ds As New DataSet
For Counter As Integer = 1 To NumberOfRecords
Dim dr As DataRow = ds.Tables(0).NewRow()
dr("RecordNumber") = Counter
dr("RandomNumber") = Rnd() * 1000
dr("RandomName") = GetRandomName()
dr("RandomDateTime") = Date.Now.AddDays(Rnd() * -365)
Private Function GetRandomName() As String
Select Case CType(Rnd() * 20, Integer)
Case 0 : Return "Abraham Bennet"
Case 1 : Return "Reginald Blotchet-Halls"
Case 2 : Return "Cheryl Carson"
Case 3 : Return "Michel DeFrance"
Case 4 : Return "Innes del Castillo"
Case 5 : Return "Ann Dull"
Case 6 : Return "Marjorie Green"
Case 7 : Return "Morningstar Greene"
Case 8 : Return "Burt Gringlesby"
Case 9 : Return "Sheryl Hunter"
Case 10 : Return "Livia Karsen"
Case 11 : Return "Charlene Locksley"
Case 12 : Return "Stearns MacFeather"
Case 13 : Return "Heather McBadden"
Case 14 : Return "Michael O'Leary"
Case 15 : Return "Sylvia Panteley"
Case 16 : Return "Albert Ringer"
Case 17 : Return "Anne Ringer"
Case 18 : Return "Meander Smith"
Case 19 : Return "Dean Straight"
Case 20 : Return "Dirk Stringer"
Don't dwell on the preceding code too much. It simply builds a DataSet full of data on the fly. Just note that after building the dataset, the Page_Load
method stores it in the user's session so you can access it later as the user pages through the results.
When the page loads, it should look something like Figure 1
|Figure 1. DataGrid with Auto Generated Data. The figure shows the first page of the data from the random dataset displayed in a DataGrid.|
Next, download the source code
for this article and copy the code from the DataGridPager.vb
file (see Listing 1
) into your Web project. Add the following to the top of the aspx page to assign the "x" prefix to controls within your project:
<%@ Register TagPrefix="x" Namespace="MyProjectName"
Note that you should replace the MyProjectName
values above with the name of the project you are working with. Also, "x" is just the prefix I choose, you can set this to whatever prefix you like. Just make sure that when you add the paging control that you use the prefix you assign here.
Now to add the paging control, add the following tag wherever you would like the paging links to appear:
<x:DataGridpPager RunAt="server" Id="dgp"
Note the DatagGridToAttachTo
attribute. This attribute is required and tells the control which DataGrid it should attach to and provide paging for. I'll cover some of this control's other attributes later and also get into the source code for the control. For now, it's more important to get the example working.