Section 4.2. Sort and View Records on Multiple Pages

4.2. Sort and View Records on Multiple Pages

Note: Want to make the GridView control display records in multiple pages? Tick a checkbox and consider it done!

By default, the GridView control will display all the records in its data set on a single page. If you have a large number of records to display, this is not a very elegant way to display your data. For example, you might want to display all the employees in your company. If you have large list of names to display, it is much neater and more efficient to display the list in multiple pages. You might also want the names to be displayed in alphabetical order, or to allow the user to jump to a particular page.

You can now perform all of these functions in the GridView control by simply selecting some checkboxes. There is no need to write lengthy code to do any of these mundane tasks.

4.2.1. How do I do that?

To see how easy it is to configure the GridView control to display records in multiple pages and to allow sorting of fields, you will use the GridView control created in the last lab and configure it to perform these additional functions.

Using the project created in the last lab, you will now configure the GridView control so that the data is displayed in multiple pages.
In the GridView Tasks menu of the GridView control, select the following checkboxes (see Figure 4-25):

Enable Paging

Displays the data in multiple pages

Enable Sorting

Allows the data to be sorted by fields

Enable Selection

Enables rows to be selected

Tip: The Enable Selection option is useful when you need to explicitly select a row in the GridView control. For example, you might want to select a row in the GridView control so that the detailed information in the row can be displayed in another GridView control.If a GridView is configured to allow selection, the SelectedIndexChanged event of the GridView control will be fired when the user selects a row in the control.

Figure 4-25. Enabling paging, sorting, and selecting for the GridView control
The GridView control will now look like the one shown in Figure 4-26.

Figure 4-26. The GridView control after the configuration

To make the GridView control look nicer, apply the Sand & Sky theme (via the Auto Format... link in the GridView Tasks menu).
Press F5 to test the application (see Figure 4-27). You can now sort the rows by field (by clicking on the field name in the GridView control), select a particular row (by clicking on the Select link), as well as display the data in multiple pages.

Figure 4-27. The GridView control with sortable fields, selectable rows, and multiple pages

Tip: GridView supports client-side paging and sorting, all without needing to refresh the page. To do so, set the EnableSortingAndPagingCallbacks property of the GridView control to True. This feature uses the Client Callback manager, which is new in ASP.NET 2.0.For more information on the Client Callback manager, see Chapter 6.

4.2.2. What about...

...modifying the Paging UI of the GridView control?

The Paging UI of the GridView control refers to the links that are displayed to allow users to navigate from one page to another. If your GridView control is going to display multiple pages, you can customize the texts displayed in the Paging UI. The Mode property (within the PagerSettings property) of the GridView control allows you to display pages in different formats. The Mode property can take any one of the following values:

NextPrevious: Displays the Next and Previous symbols; e.g., < >
Numeric: Displays the page number; e.g., 1 2 3 4 ...
NextPreviousFirstLast: Displays the Next, Previous, First and Last symbols; e.g., << < > >>
NumericFirstLast: Displays the page number as well as the First and Last symbols; e.g., << ... 4 5 6 ... >>

The PagerSettings property also exposes the following properties:

FirstPageText
NextPageText
PageButtonCount
Position
PreviousPageText

Figure 4-28 shows how the various properties configure the paging UI of the GridView control.

Figure 4-28. The properties in the GridView control affecting the paging UI

In addition, you can use images for navigation purposes using the following properties (simply set these properties to point to the path containing the images to be used):

Note: You can use custom images for the paging UI.

FirstPageImageUrl
LastPageImageUrl
PreviousPageImageUrl
NextPageImageUrl

4.2.3. Where can I learn more?

If you want to learn how paging and sorting works in the old DataGrid, check out the DataGrid Girl site (http://datagridgirl.com/), a popular site that covers all things DataGrid. Who knows, after visiting that site you might be even be more impressed with the GridView control!