TIP/Trick: Use DataPager control with ListView and Custom Data Source

Paging tabular data retrieved through a database query has been a long time need in transactional line of business applications. With time the ways of achieving this in ASP .NET have evolved into very easy solutions. On the previous version of the framework, .NET framework 3.5 (currently to the date they are now on 4.0) two server-side user controls where introduced, the ListView and the DataPager.

The idea behind the ListView control is to provide the developer with more control over the markup output while providing the data-bound experience of previous controls. The ListView control displays data based on user defined templates, which is extremely convenient for styling purposes. It also reduces to zero the garbage markup automatically generated by older controls like the GridView.

The DataPager, in the other hand, is product of the decoupling of the paging feature from the data-bound controls that implement the IPageableItemContainer interface. Providing more freedom when it comes to pagingcustomization on regards offunctionalityand appearance.

Both controls complement each other in a marvelous way. The DataPager provides pagingpracticallyout of the box when using a data source control, which is what the documentation found almost everywhere encourages to use. BUT! The truth is that sometimes we use custom data sources because of a special scenario that dictates their use to get the data. In this scenario is were the use of the DataPager becomes a little bit more challenging, since the paging is once more a developer’s responsibility rather than a delegated feature for the framework.

So how do we tackle this?

One approach is raising and handling the PagerCommand event found on the DataPager TemplatePagerField template and evaluating each command sent from the server-side controls placed there. This is extremely convenient if you want to implement a custom way of paging the data and navigating through it. You’ll also have theresponsibilityof rendering the current page you’re at, as well as all the other available navigation pages.

Another approach, and the one we will describe with more depth, is a little bit more simple and similar to the default behavior of the DataPager when used with data source controls. For this we just need to raise the ListView's PagePropertiesChanging event and invoke the DataPager's SetPageProperties method. This is an obvious combination since thePagePropertiesChangingEventArgs provide us the arguments of the SetPageProperties method overload.

The code

I think we have done enough to describe what we are trying to achieve here, so let's see the code for this. Let’s asume we have a ListView called lvProducts.

protected void lvProducts_PagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)
{
    //pager is the name of our DataPager control
    var pager = (DataPager)lvProducts.FindControl("pager"); 

    //Set false because we are using a custom data source
    pager.SetPageProperties( e.StartRowIndex, 
                e.MaximumRows, false);

    //Here we just bind the data to our list view again and the new data page will be displayed
    BindDataToListView();
}

And that's it! Paging should work like a charm. Happy coding!

Menu

So how do we tackle this?

The code