Paging and Sorting with the GridView


By default, the DetailsView shows a single record from its data source control. To allow the user to view all records, stepping through them one at a time, we needed to configure the DetailsView to allow paging. This, of course, was as simple as checking the Enable Paging check box in the DetailsView's smart tag and then customizing the paging interface through the Properties window. (Refer back to the "Customizing the Paging Interface" section for more information on this process.)

The GridView, by default, shows all of the records in its data source control. Showing all of the records, however, can lead to information overload if hundreds or thousands of records are being retrieved by the data source control. For example, in Figure 15.8 all five records of the Books table are displayed. However, imagine that instead of five records in this table there were five hundred. Such a page would be unwieldy and would likely intimidate any users who were interested in what books we were reading. (Although they'd likely be impressed with the breadth of our library!) To help make the information more digestible, we can implement paging with a GridView, showing only a small subset of the records at a time.

In addition to paging, another feature that helps improve the usefulness of data that users are familiar with is sorting. When you go to a travel planning site to book a flight, the results are usually sorted by price, from the least expensive tickets to the most expensive. However, you may be interested in some other criteria, such as departure time or airline. Many sites offer users the ability to sort the results by these other features. ASP.NET makes it easy to add similar functionality to your site. The GridView provides a means for the user to sort the results by a particular field.

In the next two sections we'll see how to implement and customize the paging and sorting capabilities in the GridView.

A Look at Paging

Enabling paging in the GridView is similar to enabling paging in the DetailsView: Simply go to the GridView's smart tag and check the Enable Paging check box. To customize the paging interface, go to the Properties window and locate the Paging section. The GridView's Paging section contains four properties:

  • AllowPaging This property indicates whether paging is supported (it defaults to False). When you checked the Enable Paging check box in the smart tag, this property was set to true.

  • PageIndex This property indicates the index of the page of data displayed. (The value is indexed starting at 0; to display the first page of data by default, leave this set at 0.)

  • PagerSettings This property contains a number of subproperties that customize the appearance of the pager row. For example, instead of having page number links, you can use Next/Previous links.

  • PageSize This property indicates the number of records to show per page.

The AllowPaging and PagerSettings properties should look familiar because they were the two properties in the Pager section of the DetailsView's properties. You probably won't ever need to set PageIndex through the Properties window; its default value of 0 ensures that the first page of data is displayed when the web page is first loaded in the user's browser. The final property, PageSize, specifies how many records to show per page. By default, 10 records will be shown per page. If you want to display more or fewer records per page, change this property value appropriately.

Testing the Paging Functionality

Because our Books table has only five records in total, leaving the PageSize at 10 would be uninteresting since there would be only one page of data. Instead, let's set this property value to 2. After you have done that, take a moment to view the ASP.NET page through a browser. Figure 15.14 shows my browser when first visiting this page. Note that I'm using the Numeric mode for the paging interface (the default). There are three pages in total, of which I am viewing page 1. Click the 3 hyperlink in the paging interface. This will reload the page, showing the third page of data (see Figure 15.15).

Figure 15.14. The first page of data is shown, displaying the first two books from the Books table.


Figure 15.15. The third page of data is shown, displaying the fifth and final book.


Watch Out!

For you to be able to page through the results of a SqlDataSource, the SqlDataSource control's DataSourceMode property must be set to DataSet. DataSet is the default value, so paging should "just work" with the SqlDataSource you have added to the page.

However, if you have changed this property to DataReader and attempt to page through its records with a GridView (or DetailsView), you will get an exception. Simply change this property back to DataSet to get things working.

This caution also applies to sorting a GridView's data, which we'll be examining shortly.


What's Happening When Moving from One Page to Another?

Regardless of whether the GridView is configured to page through the data, the associated data source control always grabs all of the records from its specified SQL query. When a pageable GridView is used, the GridView uses only a subset of its data source control's records. Specifically, the GridView grabs records based on two parameters:

  • The number of records to show per page (PageSize)

  • The current page being displayed (PageIndex)

It uses the following formula:

StartRecordIndex = PageSize * PageIndex EndRecordIndex = PageSize + (PageSize * PageIndex) - 1 


Here, StartRecordIndex and EndRecordIndex specify the starting and ending indexes of the range of the data source control's records that need to be displayed. The data source control indexes each of the records returned from the database, starting the indexing at 0. Therefore, if the GridView needs to get the first five records, it can ask the data source control for those records whose index lies between 0 and 4. To get the next five, it can ask for those whose index lies between 5 and 9, and so on.

Back in our earlier example, we set PageSize to 2 through the Properties window; when the page is first loaded, PageIndex will equal 0. This means that the values of StartRecordIndex and EndRecordIndex will be 0 and 1, respectively. Therefore, the GridView will be given the first two records from its data source control, which it will display (see Figure 15.14).

When the user clicks the 3 link to jump to the third page of data, the ASP.NET page is posted back. The GridView notes that the user has requested to see the third page of data and internally updates the value of its PageIndex property to 2. Next, the values for StartRecordIndex and EndRecordIndex are recomputed, this time returning the values 4 and 5, respectively. The data source control, again, grabs all of the records from the database. Because the data source control's records are indexed only up to 4 (remember, there are only five records in the Books table), the data source control returns just the record with index 4 (see Figure 15.15).

Did you Know?

Even though a GridView may be configured to show only, say, two records per page, the data source control will still grab all records from the database each time the user pages through a page of data. This is inefficient, especially if you're paging through large amounts of data.

To alleviate grabbing all of the redundant records, you'll need to look into using the ObjectDataSource control. For more information on this technique, refer to my article series on the GridView, available online at http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnaspp/html/GridViewEx.asp.


A Look at the Pagination Events

When the user clicks on one of the paging interface linksa page number or one of the first/next/previous/last linksthe ASP.NET page is posted back and the GridView's PageIndex property is automatically updated. When this postback occurs, the GridView raises two events related to paging that you can create event handlers for, if needed. The events are

  • PageIndexChanging This event fires before the PageIndex property is updated.

  • PageIndexChanged This event fires after the PageIndex property has been updated to the new value.

Did you Know?

Recall that to create an event handler in Visual Basic, you need to go to the ASP.NET page's code file and select the control and the event from the left and right drop-down lists at the top of the screen. For a refresher on creating event handlers, refer to Hour 7, "Working with Objects in Visual Basic."


Providing Sortable Data

In addition to allowing for its data to be paged, the GridView also makes it easy to make the data sortable. To indicate that a GridView's data should be sortable, simply click the Enable Sorting check box in the smart tag. That's all there is to it!

Enabling sorting will make the text in the header of each of the GridView's fields a link that, when clicked, will cause the ASP.NET page to be posted back. Upon postback, the GridView re-queries the data from its data source control and applies the appropriate sort command.

Take a moment to check the Enable Sorting check box on your GridView and then view the ASP.NET page through a browser. As Figure 15.16 shows, with sorting enabled, the header of each field is rendered as a link. When one of these links is clicked, the data is sorted in ascending order by the field whose header link was clicked. The GridView even supports bidirectional sorting; that is, if the user clicks the same field header again, the sort order will be reversed, ordering the results in descending order! Figure 15.17 shows the web page after the Price field's header link has been clicked.

Figure 15.16. The data is initially sorted by BookID; each field's header is rendered as a link.


Figure 15.17. The Price field's header link has been clicked, sorting the books by price.


Did you Know?

When the GridView is sorted, any default ordering of the retrieved data specified by an ORDER BY clause is overridden. That is, if your SqlDataSource retrieves the contents of the Books table ordered by the Price column, and the user opts to sort by author, the GridView's sorting preferences will trump the data source control's.

That doesn't mean that, when you're using a sortable GridView, the data source control's ORDER BY clause isn't useful. You can use the ORDER BY clause to specify the default sort order; this is how the records will be sorted when the user first visits the page. The user, then, can override the sort order by clicking on a particular column's header link.


Customizing the Sorting Interface

The GridView's sorting interface can be customized to the extent that you can indicate what fields should be sortable. (By default, all fields of a GridView are made sortable.) To indicate that a particular field should not be sortable, open the Fields dialog box by going to the GridView's smart tag and selecting the Edit Columns link.

In the Fields dialog box, the fields in the GridView are listed in the bottom-left corner. Select the field that you want to be unsortable. This will load the field's properties on the right. Scroll down until you find the property named SortExpression and then clear out this value (see Figure 15.18). When you remove the SortExpression property, the field will become unsortable.

Figure 15.18. The YearPublished field's SortExpression property has been cleared out.


Closing Comments on Sorting

At this point we've examined both paging and sorting in the GridView, but what about creating a pageable, sortable GridView? Although we've not looked at an example of such a GridView, providing such functionality involves simply checking Enable Paging and Enable Sorting.

Like paging, when a user clicks on a sortable column's header link, a postback ensues. During the postback, the GridView fires two events:

  • Sorting This event fires before the GridView is sorted.

  • Sorted This event fires after the GridView has been sorted.

The GridView maintains a read-only property named SortExpression that indicates the field by which the data is sorted. Just like with the paging events, you can create event handlers for these events.




Sams Teach Yourself ASP. NET 2.0 in 24 Hours, Complete Starter Kit
Sams Teach Yourself ASP.NET 2.0 in 24 Hours, Complete Starter Kit
ISBN: 0672327384
EAN: 2147483647
Year: 2004
Pages: 233

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net