An Extensive Examination of the DataGrid Web Control: Part 15
By Scott Mitchell
The 15th Part in a Multi-Part Series
This article is the fifteenth piece of a multi-part series on using the DataGrid Web control that will span
several months. The ASP.NET DataGrid Web control, which displays database information in an HTML table, is
highly versatile. The basics of the DataGrid were discussed in Part 1;
information on specifying display properties of the DataGrid was discussed in
Part 2. In Part 3
we examined how to associate custom events with the DataGrid.
In Part 4 we looked at how to extend
Part 3 to provide custom sorting on the results of a DataGrid. In
Part 5 we examined how to use templates to further customize
the DataGrid's appearance. Part 6 examined how to use the
DataGrid's built-in editing capabilities, while Part 7 looked at
customizing the editing interface using the EditItemTemplate. In Part 8
we looked at how to add client-side code to a ButtonColumn's client-side onclick event.
In Part 9 we examined how to enhance the DataGrid's editing
interface by having the editing interface's TextBox receive focus when the page is loaded.
In Part 10 we looked at how to (automatically) add filtering
buttons so that one can filter the data in a DataGrid. In Part 11
we examined how to create a DataGrid Web control with a column of related radio buttons.
In Part 12 we examined how to create a sortable DataGrid
that can be sorted in ascending and descending order. Part 13
examined how to sum up a DataGrid column and have the sum displayed in the footer. Part
14 looked at how to build a master/detail DataGrid. This part examines a long overdue topic for
this article series: seeing how to add paging support to the DataGrid!
ASP.NET Data Web Controls Kick Start is author Scott
Mitchell's most recent book, which thoroughly examines three of the most commonly
used ASP.NET Web controls: the DataGrid, DataList, and Repeater. These three Web controls
can be difficult to master due to their numerous features and capabilities. With this book, you'll
quickly become an expert, learning the gritty details and true capabilities of each.
This 400+ page book explores the topics in this article series in much greater depth, along with
examining various topics and techniques not covered here.
Scott Mitchell is the editor and founder of 4GuysFromRolla.com, author of the An Extensive Examination
of the DataGrid Web Control article series, and author of numerous other ASP and ASP.NET
books.
Introduction
As discussed in previous articles, the DataGrid makes displaying
database data an absolute breeze. All it takes is configuring the DataGrid's properties and writing
two lines of code. While this simple approach works great for displaying relatively small amounts of
data, displaying large amounts of data can result in exceptionally large DataGrids. Such large
DataGrids have two main disadvantages:
Readers cannot be expected to be able to digest such large blocks of information, and
Dumping large amounts of data in one Web page leads to large Web page sizes, which can take unbearably
long to download on dial-up connections.
Focusing on the first disadvantage, realize that when presenting your users with information, you want
to do so in small, manageable chunks. Blasting all of the data to the screen at once can
be overwhelming for the person visiting the Web page. For example, searching Google for the term "DataGrid"
yields roughly 217,000 results. Thankfully, though, Google only presents 10 of them at a time!
In this article we will see how to use the DataGrid's built-in paging facilities in order to display
database data in manageable chunks.
Paging Support in the DataGrid
The DataGrid supports two kinds of paging:
Default paging, and
Custom paging
Default paging, which this article focuses on, is the simpler of the two to setup and configure.
As we will see, getting default paging to work only requires a few minor modifications to the standard
process of displaying data in a DataGrid.
The major difference between default paging and custom paging is this: with default paging, each time
you want to display a page of data in the DataGrid, you need to grab all of the data from the
underlying data source. Then, the DataGrid only selectively displays part of the entire set of data,
based on what page you want to display and how many records per page to display. The key thing to understand
here is that everytime the page is loaded, the entire data result is retrieved.
For example,
imagine that you work at an eCommerce company and you want to allow the user to page through a list
of the 150 products your company sells. Specifically, you want to display 10 records per page.
Now, when a user visits the Web page, you will access all 150 records, and the DataGrid will display the
first 10 products (products 1 to 10). Next, imagine that the user navigates to the next page of data. This will cause a postback,
at which point you'll rerequest all 150 records, but this time the DataGrid will display the second
set of 10 (products 11 to 20).
With custom paging, you, the developer, have to do a bit more work. Rather than just being able to
blindly bind database data to the DataGrid, you have to selectively retrieve only those records that should
be shown for the particular page. The benefit of this is that when displaying the first page of data,
you can use a SQL statement that only retrieves products 1 through 10, rather than all 150 records.
However, your SQL statement has to be "clever" enough to be able to know how to just snip out the right subset
of records from the 150.
The Performance Edge of Custom Paging
Realize that custom paging provides better performance than default paging because only those database
records that need to be displayed are retrieved. In our products example, we assumed there were 150 products,
showing 10 per page. With custom paging, if the user stepped through all 15 pages of data, precisely
150 records would have been queried from the database. With default paging, however, for each page
of data, 150 records would have been accessed, leading to a total number of retrieved records of
15 times 150, or 2,250!
While custom paging exhibits better performance, default paging is much easier to use. Therefore,
I would encourage you to use default paging if the data you are paging through is relatively small
and/or the database server is not heavily trafficked. If you have thousands of tens of thousands
of records you are paging through, by all means use custom paging. However, for paging through
something like the ASPFAQs.com database, which only has, currently,
~200 FAQs, default paging is sufficient.
Understanding How the DataGrid Implements Paging
Before we examine how to add paging support, it's imperative that we take a moment to discuss how the
DataGrid implements paging. The DataGrid contains a handful of properties designed to aid in paging:
CurrentPageIndex - indicates what page of data to display. This property is indexed
at zero, meaning to display the first page of data, this property's value should be 0; to display the second page
of data, this property's value should be 1; and so on. (This property's default value is 0, so
by default the first page of data will be displayed.)
PageSize - indicates how many records to show per page.
PageCount - indicates how many total pages of data there are. This value is computed
by the ceiling of the number of total records divided by the number of records per page.
AllowPaging - this Boolean property indicates whether or not the DataGrid is pageable.
In order to use the DataGrid's built-in paging features, you need to set this to True.
There are some additional paging properties that are germane to custom paging; however, this article will
be focusing on default paging.
Pageable DataGrid's automatically display a paging interface. This paging interface is customizable but, by
default, displays a left and right arrow hyperlink for navigating to the previous and next pages. When a user
clicks on one of these navigational hyperlinks, the ASP.NET Web page is posted back and the DataGrid's
PageIndexChanged event fires. Essentially, to provide paging support you need to add an
event handler that responds to this event. Specifically, the event handler needs to correctly adjust the
DataGrid's CurrentPageIndex property and rebind the DataGrid. We'll see how, exactly, to
accomplish this in Part 2!
