CodeProject: Pager Control for Repeater, DataList, or an Enumerable Collection. Free source code and programming help

Report Article

Discuss

Send to a friend

60 votes for this Article.

Popularity: 8.20 Rating: 4.61 out of 5

Introduction

Instead of trying to create an enhanced Repeater, I decided to make a separate control that would take care of paging. This CollectionPager acts as a middleman for a control (like the Repeater) and your data source (Dataset or Collection object). It uses the PagedDataSource class to accomplish this.

Having this functionality in a separate control allows you to add paging to any Web Control that accepts a data source. Also, you can place the CollectionPager wherever you want in relation to the control it is binding to.

Example of the Pager in action.

Navigation examples...

Example of the Pager in action.

Postback or QueryString option

This control also allows you to page through your collection with two different methods:

QueryString. Use when you don't want/need to postback data. Through the control's properties, you can set a QueryString key to use. The default key is "Page".
Postback. Use when you want/need to postback data. Helpful for when you want to maintain viewstate.

Using the Control

To use the control, simply add a reference to the complied DLL and put it in your toolbox. You can then drag it to your project. If you wish to do it by hand, it'll look something like this in your .aspx file....

<%@ Register TagPrefix="cc1" Namespace="SiteUtils" 
  Assembly="CollectionPager" %>
<%@ Page language="c#" Codebehind="Example.aspx.cs" 
  AutoEventWireup="false" Inherits="CollectionPagerExample.WebForm1" %>
<HTML>
    <HEAD><TITLE>Collection Repeater Example</TITLE></HEAD>
    <BODY>
<DIV>
<ASP:LITERAL id=litDifferentResultsFormat runat="server"></ASP:LITERAL>
</DIV>
<DIV>
<ASP:LITERAL id=litTopPager runat="server"></ASP:LITERAL>
</DIV>

    <ASP:REPEATER id="Repeater1" runat="server">
        <HEADERTEMPLATE>
            <TABLE BORDER="1" CELLPADDING="3" CELLSPACING="0">
            <TR>
            <TH>Header1</TH>
            <TH>Header2</TH>
            <TH>Header3</TH>
            <TH>Header4</TH>
            <TH>Header5</TH>
            </TR>
        </HEADERTEMPLATE>
        <ITEMTEMPLATE><TR>
            <TD><%# DataBinder.Eval(Container.DataItem, "Column1") %></TD>
            <TD><%# DataBinder.Eval(Container.DataItem, "Column2") %></TD>
            <TD><%# DataBinder.Eval(Container.DataItem, "Column3") %></TD>
            <TD><%# DataBinder.Eval(Container.DataItem, "Column4") %></TD>
            <TD><%# DataBinder.Eval(Container.DataItem, "Column5") %></TD>
        </TR></ITEMTEMPLATE>
        <FOOTERTEMPLATE>
            </TABLE>
        </FOOTERTEMPLATE>
    </ASP:REPEATER>

    <CC1:COLLECTIONPAGER id="CollectionPager1" runat="server">
    </CC1:COLLECTIONPAGER>
    </BODY>
</HTML>

In your code behind, you just feed the CollectionPager1 object your data source. If you are using a DataSet as your data source, you will need to pass a DataView of it... for example:

public class WebForm1 : System.Web.UI.Page 
{ 
    protected System.Web.UI.WebControls.Repeater Repeater1; 
    protected SiteUtils.CollectionPager CollectionPager1; 

    private void Page_Load(object sender, System.EventArgs e) 
    { 
        //Create DataSet DataSet SampleDataSet = SampleData();

        //Set DataSource of Pager to Sample Data 

   
        CollectionPager1.DataSource = SampleDataSet.Tables[0].DefaultView;
        //Let the Pager know what Control it needs to DataBind during the PreRender.

        
        CollectionPager1.BindToControl = Repeater1; //UPDATED! 

        //The Control now takes the object you are binding to,

        // instead of the name of it (as a string) 


        //Set the DataSource of the Repeater to the PagedData coming from the Pager. 

        Repeater1.DataSource = CollectionPager1.DataSourcePaged; 

        //Done!


    } 
    
    protected override void Render(HtmlTextWriter writer)
    {
        //Example of how to have the results show up in a different spot.

        litDifferentResultsFormat.Text = 
          CollectionPager1.BuildResults("Currently viewing {0} through {1}");

        //Example of how to have a second pager that is tied in...

        litTopPager.Text = CollectionPager1.RenderedHtml;

        base.Render (writer);
    }
    
    ... other stuff ...
}

Control Properties

This control has a lot of properties that allow for customizing its appearance. Every section allows you to specify a CssClass and Style. You can also control the character which is used between page numbers. Here's a screenshot of the properties available:

Installation

Installing the control

You can install the control in the standard way:

Create a "bin" folder inside the application root of your website (if it's not already there).
Copy the assembly file CollectionPager.dll into the bin folder.

Installing the demo

Unzip the ZIP file with the demo. Right-click on the "CollectionPagerExample" subfolder and select Properties. On the Properties window, click "web-sharing" and check "Share this folder".

You should then be able to browse to:

http://localhost/CollectionPagerExample/Example.aspx.

Opening the Solution in Visual Studio

There should be a "CollectionPagerSolution.sln" file in the root of the unzipped folder. When you open this file, you may be prompted for the CollectionPagerExample location. Use the Browse button to locate the CollectionPagerSample folder.

Good Luck!!!

Please let me know if you have any questions or thoughts. As this is my first CodeProject article, I hope that I was clear enough on what it does and how to use it. Thanks!!!

Updates:

2005/10/14

I have added "Slider" functionality now. Hey, I couldn't think of a better name! :-) Anyway... when you have a list of page numbers in your pager ... it can move. So, if you're on page 20 and your slider size is 10... the pager will display links to 15-25. If you go down a page to 19 it will show links to 14-24. Use the SliderSize and UseSlider properties to make it happen. :-)
The repeater now takes an object as its BindToControl property. This should reduce confusion when using user controls and such. On a side note, there is now an example of using the control with a user control.
Other additional tweaks. Enjoy!

2005/05/26 (Major update)

I have added a lot of functionality and flexibility to the pager.
You can now have it display a "First" and "Last" button/link to allow users to jump to those pages.
The previous/next buttons can now be displayed on the left, right, split, or none.
You can also access the ResultsInfo in your code behind. This allows you to place this info elsewhere on the page. See example.
I have added viewstate functions to correctly load and save viewstate between postbacks.
By using the "RenderedHTML" property, you can easily create a second pager above your grid. See example.

2005/04/07

Added ShowBackNextLinks property to allow you to display or hide the Back & Next buttons/links.
Added ShowPageNumbers property to allow you to display or hide the page numbers.

2005/03/22

Added PagingMode property to allow you to choose QueryString or PostBack methods of changing pages.
Fixed a bug reported by "whylove" - Thanks!!

2005/03/10

Added QueryStringKey property. Allows you to have multiple controls on a single page. Use a unique key for each control.
Also fixed a bug reported by a user. Thanks Marc!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

kevnord

Location:

United States

Other popular Custom Controls articles:

ASP.NET Popup Control
Highly customizable JavaScript popup control for web page wrapped in ASP.NET custom control.
SqlWhereBuilder ASP.NET Server Control
A user interface web control for building conditions suitable for use in a SQL statement.
Roll your own ASP.NET Chart Control
How to build a chart control with full design-time support.
Databound Schedule controls
These data controls can show scheduled events automatically.
DayPilot - Building an Outlook-Like Calendar Component for ASP.NET
A good-looking ASP.NET control that shows events visually arranged in a day calendar. Includes design-time support and data binding.

Article Top

You must Sign In to use this message board.

Msgs 1 to 25 of 251 (Total in Forum: 251) (Refresh)

FirstPrevNext

Subject

Author

Date

object datasource

adamjws

13:01 4 Jul '08

hi i'm new to .net , can this be used with an object datasource? which part of the code must i change?
Sign In·View Thread·PermaLink

Bug on iis with cookieless session

Leo K

9:40 3 Jul '08

The control does not generate paging URLs correctly on IIS when application uses cookieless session. The session key is not added to the url. (It works on studio 2008 development web environment).

The problem is that Request.RawUrl does not have the session key,

Fix: (is there a better one?)

At the end of UpdateQueryStringItem added code:

.....
string newBase = ResolveUrl(httpRequest.AppRelativeCurrentExecutionFilePath);

NewURL = NewURL.IndexOf("?") <= 0 ? newBase + NewURL.Substring(NewURL.IndexOf("?")) : newBase;

return NewURL;

Mobile use

Leo K

13:02 29 Jun '08

Nice work! Since this control does not use javascript to move between pages, it may be perfect for mobile phone web sites. Thanks.
Sign In·View Thread·PermaLink

How to change the message "Displaying results 1-6 (of 60)"

stan92

8:28 28 Jun '08

Hi, Sorry for the stupid question,but how to change this message from Code Behind. I tried CollectionPager1.ResultsFormat("Currently viewing {0} through {1}") but it seems it doesn't work.. Any help ? Stan PS : Very good control...
Sign In·View Thread·PermaLink

Bug in Back/Next Display

stixoffire

16:40 26 Jun '08

When the _pagecount = 1 the pager displays the back/next links. There is probably a better place to do this but I was in a bit of a hurry.

I modified the code here:

			
//Make Back & Next section (if needed)
			if(BackNextLocation != BackNextLocationType.None)
             // changed ADDED this  IF to the code - if we have more than one page build the links
                if (_PagedDataSet.PageCount > 1)
                {
                    {
                        if (BackNextDisplay == BackNextDisplayType.Buttons)
                        {
                            BackNextNavBack = BuildButtonNavBack(CurrentPage);
                            BackNextNavSeparator += "&nbsp;&nbsp;";
                            BackNextNavNext += BuildButtonNavNext(CurrentPage, PageCount);
                        }
                        else
                        {
                            BackNextNavBack = BuildLinkNavBack(CurrentPage);
                            BackNextNavSeparator += string.Format(" {0} ", BackNextLinkSeparator);
                            BackNextNavNext += BuildLinkNavNext(CurrentPage, PageCount);
                        }
                    }
                }

Problem with using Click event - Error

miltash

5:03 25 May '08

I tried to bind the data in Click event instead of in Page_Load event.
My code will look like


protected void Page_Load(object sender, System.EventArgs e)
{
   if (!IsPostBack)
     showData();
}

private void showData()
{
  DataSet SampleDataSet = SampleData();
  CollectionPager1.DataSource = SampleDataSet.Tables[0].DefaultView;
  CollectionPager1.BindToControl = Repeater1;
  CollectionPager1.CurrentPage
  Repeater1.DataSource = CollectionPager1.DataSourcePaged;
}

protected void CollectionPager1_Click(object sender, EventArgs e)
{
  showData();
}

But its throwing the following error
"Index -4 is either negative or above rows count."

Here 4 is my PageSize.. So if i change pagesize to 10 it will show
"Index -10 is either negative or above rows count."

I am desperately loOking for a solution, since I wanted to implement numeric paging in a
DataList. Please help me...

Anzer

Re: Problem with using Click event - Error

stixoffire

10:27 19 Jun '08

Why are you catching a click event of the Pager - you don't have to do that .. the pager has a built in function.. so if you click the page numbers or whatever your results are listed as... the event is captured by the pager and it actually triggers the data source paged to send the next page..
Sign In·View Thread·PermaLink

CollectionPager Vanish !!!

Men Bahalemeh

21:55 18 May '08

Hi, I have a search in my page and a repeater with this CollectinPager and everything is OK till i began to search . When i click the Search Button CollectionPager is vanish . What do think about this problem ???????
Sign In·View Thread·PermaLink	2.00/5 (1 vote)

code critique

ouchies

8:14 8 May '08

this is a really great control, very handy but I had just a couple of questions on some of the code. I realize you probably haven't looked at it in awhile but if you get a sec:

1)why all the null checks on the Context object? I can't imagine any case where it would be null in your code (I think you'd have to be wayyyy early in the lifecycle for that to even be possible). In fact I believe if you use System.Web.HttpContext.Current it will never be null as long as you don't do something stupid with an asynch delegate or something. I actually set breakpoints on all those null checks and couldn't get one to fire under any condition.
2)In your BuildControl() method you make a call to BuildResults() to get the content for the results but then immediately after that you have an if-else that overwrites it with the same basic logic. I'm guessing you just decided to move this logic to its own method and forgot to remove it from the calling function?

2.00/5 (1 vote)

Re: code critique

kevnord

6:30 9 May '08

1) The null checks on the Context object were put into place to eliminate exceptions when viewing the control in design mode. Obviously there are better ways to do this. I must not have known about them at the time or really cared. 2) Probably the result of late night coding. You've probably looked over my code more thoroughly than I did at the time. hehe -k
Sign In·View Thread·PermaLink

Re: code critique

stixoffire

10:44 19 Jun '08

Thanks for that spot on the duplicate code operation - maybe not a lot of speed gained but no sense doing over what was done right the first time...

I make these little mistakes sometimes when I move a function into its own method - and forget to pull out that code...... I started just commenting it first then copy over to its own function.. that way I just uncomment in its function and can delete old commented code...

It would seem you looked over the code pretty well - dd you spot the error for page count when using result sets... the last page results is off by I think 1 - I have not got around to fixing it yet - since I do not use the function anymore..
I had a site where I needed to get it going in a hurry and did not have enough time to code the location to filter the results more atomically .. and thats how I found thaat one..

ASP.NET Ajax Problem

Umer Nawab

3:28 5 Apr '08

Hi: I am trying to use this control inside an update panel. It is working but on every page change, it postsback the entire page. does anyone has solution to this problem? Thanks Umer.
Sign In·View Thread·PermaLink

How to seperate the Back and Next so it shows like <<Back 1 2 3 4 5 6 7 8 9 10 Next>>

BlazingMavrick

0:17 3 Apr '08

Hi, Brilliant Control, is helping me out a lot thankyou !! but how can i change the position of the Back and Next links, i would like them at either end of the numbers, any ideas??
Sign In·View Thread·PermaLink	1.00/5 (1 vote)

Re: How to seperate the Back and Next so it shows like <<Back 1 2 3 4 5 6 7 8 9 10 Next>>

BlazingMavrick

0:27 3 Apr '08

a ha, scrub that i found the property SPLIT and now it looks great! Thankyou so much for this control, looking all over the net for something like this and everything seems so convoluted but this is very simple and easy to use, Great !!! Kind Regards Neil
Sign In·View Thread·PermaLink

CurrentPage property is read only. How to navigate to the last page proramatically?

Member 4367013

4:49 22 Mar '08

CurrentPage property is read only. How to navigate to the last page proramatically?
Sign In·View Thread·PermaLink	5.00/5 (1 vote)

Re: CurrentPage property is read only. How to navigate to the last page proramatically?

stixoffire

10:55 19 Jun '08

here is what I see in the code

<pre>          public int CurrentPage
          {
               get
               {
                    if(_CurrentPage>MaxPages)
                    {
                         return MaxPages;
                    }
                    else
                    {
                         return _CurrentPage;
                    }
               }
               set
          {
                    if( value>MaxPages)
                    {
                         _CurrentPage = MaxPages;
                    }
                    else
                    {
                                                   if(value < 0)
                                                   { _CurrentPage = 0; }
                                                   else {

                         _CurrentPage = value; }

                    }

          }</pre>

CurrentPage property does not work

booth_troy

5:44 7 Feb '08

I am trying to keep track of the current page within the pager control. It seems to me that the CurrentPage property should do this but it doesn't. It returns 1 no matter what page that I am actually on. Any help with this would be appreciated.
Sign In·View Thread·PermaLink

Re: CurrentPage property does not work

Member 4731358

17:54 3 Mar '08

Perhaps you are using wrong Event to get it...
Sign In·View Thread·PermaLink

Re: CurrentPage property does not work

stixoffire

10:29 19 Jun '08

Did you find your answer - I am thinking you need to get that value from the Datasourcepaged object ??
Sign In·View Thread·PermaLink

Re: CurrentPage property does not work

stixoffire

10:45 19 Jun '08

When I set my breakpoint - I get the page I have selected ..
Sign In·View Thread·PermaLink

VB.Net AJAX Postback Problem

MDCragg

16:24 16 Jan '08

I placed the CollectionPager and my repeater control in an AJAX UpdatePanel. The CollectionPager works really well in that it pages through the Repeater control...but...it posts back the entire page every time you select a new page. It should only refresh within the UpdatePanel. I've tried a bunch of settings changes in both the CollectionPager and the UpdatePanel but no matter what...every thing I try always results in the same problem.

Has anybody experienced and overcome this problem?

Thanks...MDCragg

3.00/5 (1 vote)

Re: VB.Net AJAX Postback Problem

Member 4731358

17:52 3 Mar '08

I have the same problem. But my repeater and pager with Update Panel is in User Control. When i put the same code not in the User Control, just on page, it's works... But for me it still not working in User Control. Maybe this is because Master Page... not sure for now
Sign In·View Thread·PermaLink

Re: VB.Net AJAX Postback Problem

Member 4731358

18:01 3 Mar '08

Just checked again. Problem with my UpdatePanel and pager because of Mater Page. When i cut my update panel code with pager and put it in separate page which is not under Master Page it start working... But it's not resolve problem, because i need it to use under MasterPage
Sign In·View Thread·PermaLink

Repeter control is not getting bound

bkameshreddy

0:39 28 Dec '07

Hi, I am using the pager control. Its very good. But I have a problem. I am using this control in tabstrip. When I switch tabs, we have data for some tabs and no data for some tabs. When we are swithching the tab with no data the Repeter control is not getting bound. Please help me if there is any solution. Also let me know if you need more info. Thanks, Kamesh
Sign In·View Thread·PermaLink

Re: Repeter control is not getting bound

skrm75

4:28 2 Jan '08

hi can you tell if u are using studio 2005
Sign In·View Thread·PermaLink

Last Visit: Tuesday, July 8, 2008 5:55 PM Last Update:Tuesday, July 8, 2008 5:55 PM

12 3 4 5 6 7 8 9 10 Next »

General