An Extensive Examination of the DataGrid Web Control: Part 15By 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 |
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
CurrentPageIndex property and rebind the DataGrid. We'll see how, exactly, to
accomplish this in Part 2!