Creating a Repeater that Supports Pagination and Sorting
By Rachael Schoenbaum
Introduction
ASP.NET ships with a number of controls designed for displaying data, such as the DataGrid, DataList, and Repeater. While the DataGrid is, by far, the most robust of the three data Web controls, the DataGrid's layout of its data is fairly rigid. That is, with a DataGrid each record in the
DataSource
is going to be rendered as a single row in
a table, with each field as a table column. On the other end of the spectrum the Repeater control allows complete and total
control of the rendered output, but is lacking the advanced features inherent in the DataGrid, such as sorting and paging of
the underlying data. (For a more detailed discussion on the trade offs of each of the three data Web controls be sure
to read Scott Mitchell's article, Deciding
When to Use the DataGrid, DataList, or Repeater.)
After encountering a number of project requirements where I needed both the rendering flexibility of the Repeater and the sorting and paging features of the DataGrid, I decided to create a custom, compiled Web control that would marry the flexibility of the Repeater with the functionality of the DataGrid. In this article we'll examine this control of mine, SortablePaginationRepeater, and see how to extend the Repeater to provide pagination and sorting. (Take a moment to view a live demo of the control we'll be creating...)
Extending .NET Classes
Extending a class in .NET is basically like saying:
I really like the functionality of this class, but it's missing a few things and/or doing a few things wrong for my needs. I don't want to attempt to re-write the functionality of the entire class, I only want to change the pieces that don't work for me.When you extend a class, you get access to all of its original public and protected members and are allowed to override the ones you need to change. You can also add new functionality that the original never had in the first place. This gives you a lot of freedom to use classes that come natively in .NET to provide the basic structure for the functionality you want to create, without having to write it from scratch. There are a number of articles here on 4Guys that illustrate how to extend an existing Web control:
- Easily Adding Functionality to ASP.NET Server Controls
- Creating a Rollover Button Server Control
- Creating a Row-Selectable DataGrid Control
- Displaying Text in the Browser's Status Bar When Mousing Over a LinkButton
Inherits
keyword to your class's definition, specifying
the class to extend. For example, to create a class named SortablePaginationRepeater
that extends the Repeater
class, you
would use the following syntax for the class's definition:
Public Class SortablePaginationRepeater : Inherits Repeater
|
Note: You can also put the Inherits
keyword on the line following the class declaration (thereby removing the colon as well).
In order to enhance the Repeater to support paging and sorting we'll create a new class that uses the Repeater as the base class. The new class, by default, will contain the complete functionality of the Repeater control; we'll add our own properties, methods, and event handlers or override the Repeater's in order to add the necessary functionality for sorting and paging.
Step 1: Adding Properties to the Control
When extending an existing control, oftentimes you'll need to add some new properties that capture information important to the extended control's new functionality. For example, our control is going to need a way for a page developer to pass in information regarding how the data should be sorted, how many records to show per page, and so on. When adding properties to a Web control it is important to use the
ViewState
collection so that any values
changed programmatically by the page developer persist across postbacks.
Here is an example of the property syntax utilizing ViewState
as a backing store:
|
The following properties are available in the SortablePaginationRepeater control:
PageLocation
– this defines where the pagination controls appear: at the top of the page, bottom of the page, or both.PagerStyle
– this allows the user to define the type of pagination controls that appear:Dropdown
,NumericPages
,NextPrev
, orTextBox
.PageSize
– the number of records that appear per pagePageButtonCount
– used only forPagerStyle.NumericPages
, this defines the number of page buttons that appearCurrentPageIndex
– the current page to displaySortBy
– a string containing the column and direction to sort byTableWidth
– the width the table containing the pagination controls is; this can be expressed as a whole number or percentageGoButtonCssClass
– used only forPagerStyle.TextBox
, this defines the CSS class for the buttonSortColumn
– stores the information that is used for the sorting control
Setting Up the Object for Pagination
.NET comes with a native object called the
PagedDataSource
, which provides a really convenient way to page through data.
The PagedDataSource
class has a DataSource
property that should be assigned the data to page through.
In addition, the PagedDataSource
class contains properties to specify the number of records per page and the
current page you want to display. The PagedDataSource
can then be bound to a data Web control and the appropriate
subset of records will be displayed. To provide paging in our control, then, instead of using the DataSource
the
page developer passes in, we will internally use a PagedDataSource
. Here's an example of how this is done:
|
You'll notice that not every data type can be converted into a PagedDataSource
, hence the exception that is
thrown. Only enumerable objects (those capable of being counted or indexed) can be assigned as a DataSource
for
the PagedDataSource
. There are a couple of exceptions - namely DataViews
, DataTables
, and
DataSets
- that may not be enumerable themselves but have properties that are. In this case, we set the
DataSource
to the enumerable property of the object.
Another interesting thing to note is how DataSets get used. The Repeater has a native property called DataMember
.
This property allows you to specify a particular DataTable of the DataSource to use. If the DataMember
property
is not provided, the object uses the first table in the index of tables.
(For more information on the PagedDataSource
, see Harrison Enholm's article,
Adding Paging Support to the Repeater or DataList with the PagedDataSource
Class.)
Now that we've looked at how to implement paging, we're ready to turn our attention to the steps necessary to add sorting support. In Part 2 we'll examine the steps taken to provide sorting support as well as see the control used in an ASP.NET page.