2.7. Adding Next/Previous Navigation to a DataGrid

Problem

You need to display data from a database in a table; the database has more rows than can fit on a single page, so you want to use next/previous buttons for navigation.

Solution

Use a DataGrid control, enable its built-in pagination features, and then bind the data to it.

Add a DataGrid control to the .aspx file, and use its AllowPaging and other related attributes to enable pagination.

In the code-behind class for the page, use the .NET language of your choice to:

  1. Create a routine that binds a DataSet to the DataGrid in the usual fashion.

  2. Create an event handler that performs the page navigation, for example, one that handles the PageIndexChanged event for the DataGrid and rebinds the data.

Figure 2-6 shows the appearance of a typical DataGrid within a browser with next/previous navigation. Examples 2-17, 2-18 through 2-19 show the .aspx and code-behind files for an application that produces this result.

DataGrid with next/previous navigation output

Figure 2-6. DataGrid with next/previous navigation output

Discussion

The DataGrid control includes the ability to perform pagination of the data that is displayed in the grid; using the built-in pagination requires little code. Pagination is enabled and configured by the attributes of the DataGrid element:

 AllowPaging="True" PageSize="5" PagerStyle-Mode="NextPrev" PagerStyle-Position="Bottom" PagerStyle-HorizontalAlign="Center" PagerStyle-NextPageText="Next" ...

Get ASP.NET 2.0 Cookbook, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.