Click here to Skip to main content
13,000,742 members (45,911 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


13 bookmarked
Posted 29 Apr 2015

How to Customize the Pager Template

, 29 Apr 2015
Rate this:
Please Sign up or sign in to vote.
This article shows you how to customize the pager template


This article is based on how to customize the Pager User Interface:

  • In this article, I have tried to explain how to customize the Pager User Interface using some of the server controls.
  • As per my experience, I have worked on the following scenarios while customizing the pager:

I will take a look at a few controls step by step, and see the difference in customizing the pager using each of them:

  1. CheckBoxList
  2. DropDownList
  3. Menu
  4. Buttons
  5. DataPager

Checkbox List

  • I have populated the checkbox list with the page indexes.
  • On checking any of the items in the checkbox list, that corresponding page will be rendered showing the data item.
  • In this example, I will be using a details view control.
  • The code is as follows:
<asp:DetailsView ID="dv" AllowPaging="true" runat="server" 

DataSourceID="sql"  OnDataBound="databound">
           <asp:CheckBoxList ID="cbl" runat="server"  AutoPostBack="true" 

           OnSelectedIndexChanged="changed" />
<asp:SqlDataSource ID="sql" runat="server" 

ConnectionString="Data Source=.\SQLEXPRESS;
Integrated Security=True;User Instance=True" SelectCommand="select * from Table2" />

The code behind is given below:

public void databound(object sender, EventArgs e)
    CheckBoxList cbl = (CheckBoxList)dv.BottomPagerRow.Cells[0].FindControl("cbl");

    for (int i = 0; i < dv.PageCount; i++)
        ListItem item = new ListItem(string.Format("Item:{0}",i+1),i.ToString());
        if (dv.PageIndex == i)
          cbl.Items[i].Selected = true;

public void changed(object sender, EventArgs e)
    CheckBoxList cbl = (CheckBoxList)dv.BottomPagerRow.Cells[0].FindControl("cbl");

    dv.PageIndex = cbl.SelectedIndex;


  • Please note that sample is the column.
  • Item :1 etc. are the check box list items that you select to traverse to the desired page.

Dropdown List

  • Now I will be using a FormView control.
  • In this, please note the difference with the DetailsView control.
  • There is not much difference in PageCustomization, because in the previous I used a check box list and now I am using a Dropdownlist.
  • The only difference is the way we are rendering the items.

Here an item template is being used here:

Look at the code:

<asp:FormView ID="fv" runat="server" 

DataSourceID="sql" OnDataBound="databound" AllowPaging="true">
   <h1><%# Eval("Sample")%></h1>
     <asp:DropDownList ID="ddl" OnSelectedIndexChanged="changed" AutoPostBack="true" runat="server" />  
<asp:SqlDataSource ID="sql" runat="server" 

ConnectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=E:\visual_projects\WebSite39\App_Data\Database.mdf;
Integrated Security=True;User Instance=True" SelectCommand="select * from Table2" />

The code behind is given below:

public void databound(object sender, EventArgs e)
    DropDownList ddl = (DropDownList)fv.BottomPagerRow.Cells[0].FindControl("ddl");

    for (int i = 0; i < fv.PageCount; i++)
        ListItem item = new ListItem(string.Format("Item:{0}",i+1),i.ToString());
        if (fv.PageIndex == i)
            ddl.Items[i].Selected = true;

public void changed(object sender, EventArgs e)
    DropDownList ddl = (DropDownList)fv.BottomPagerRow.Cells[0].FindControl("ddl");

    fv.PageIndex = ddl.SelectedIndex;


  • If you look at the above output, you will notice that I selected an item from the dropdownlist.
  • That item got selected and is displayed.
  • If you will see the code, you will notice that the "autopostback" property is set to true.
  • If I don't set it to true, the results won't be reflected.

If you notice, the code which I used for both the list controls to populate them with page number indexes is the same.

I am loading the list controls with page number indexes in the "RowDataBound" event.

If I select an item from the list, the item corresponding to that index is shown, why is that so?, because if you see the "changed" method(method corresponding to OnSelectedItemChanged event handler), you will observe that I am setting the pageindex of the formview to the selected item index.


This control is used to provide paging to Listview. This is because list view inherently does not provide paging.

DataPager can be used with any control which implements the IPAGEABLEITEMCONTAINER interface. ListView is the one which implements this interface.

In the below section, I have defined a template pager where I have used 2 link buttons to traverse through the pages.

Please look at the code below:

<asp:ListView DataSourceID="sql" ID="lv" runat="server" >
          <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />    
          <asp:DataPager ID="pg" PageSize="1" runat="server">
              <asp:TemplatePagerField Visible="true" OnPagerCommand="pager">
                 <asp:LinkButton ID="lb1" Text="Previous" CommandName="Previous" runat="server" />  
                 <asp:LinkButton ID="lb2" Text="Next" CommandName="Next" runat="server" />  
       <%# Eval("Column")%>

The code behind is as follows:

This contains the event handler which handles the OnPagerCommands.

protected void pager(object sender, DataPagerCommandEventArgs e)
    e.NewMaximumRows = e.Item.Pager.MaximumRows;

        case "Previous":
            if (e.Item.Pager.StartRowIndex > 0)
                e.NewStartRowIndex = e.Item.Pager.StartRowIndex - 1;

        case "Next":
            e.NewStartRowIndex = e.Item.Pager.StartRowIndex + 1;

In the above code, I have:

  1. Every time when paging occurs, I have set the maximum rows to the pagers maximum rows. Hence the rows will always remain updated.
  2. Now if I select the previous page command, then I decrement PagerRowIndex by 1.

    Why by 1? Ok because if you notice that the page size set by me is = 1.

    So every time I traverse by 1. If I give some random value, then an exception will occur.

  3. Similarly for the next page, I increment by 1.


  • In this, the numeric data being displayed is the database data.
  • Here, I have placed two link buttons. These buttons help to navigate back and forth.

Finally, we will take a look into Menu Pager control:


I will do a customized paging in the gridview control.

Look at the code below:

<asp:GridView ID="gv" PageSize="3" OnDataBound="databound" 

    runat="server" AllowPaging="true" DataSourceID="sql">
                 <asp:LinkButton ID="lb1" Text="Previous" 

                 CommandName="Page" CommandArgument="Prev" runat="server" />
               <asp:Menu ID="menupager" runat="server" 

               Orientation="Horizontal"  OnMenuItemClick="menuclick" />
                 <asp:LinkButton ID="lb2" Text="Next" CommandName="Page" 

                 CommandArgument="Next" runat="server" />

Also look at the code behind:

protected void databound(object sender, EventArgs e)
    Menu menuPager = (Menu)gv.BottomPagerRow.FindControl("menuPager");
    for (int i = 0; i < gv.PageCount; i++)

        MenuItem item = new MenuItem();
        item.Text = string.Format("", i + 1);
        item.Value = i.ToString();
        if (gv.PageIndex == i)
            item.Selected = true;

protected void menuclick(object sender, MenuEventArgs e)
    gv.PageIndex = Int32.Parse(e.Item.Value);
  • If you take a note on the Data Bound event handler of the grid view, you will notice that the handling is the same as that of other list controls.
  • When I click any menu item, I set the page index of the GridView to that, which is current.



From the above discussion, I have tried to cover a few things:

  1. How to customize the pager using list controls: For that, you need to do the following things:
    • In the RowDataBound of the control, fill the list control with the page numbers.
    • Then you need to set the index of the control to the current updated index.
  2. How to customize the pager using button controls:
    • Above I have used linkbutton, but you can do the same using any kind of button.
    • You can either specify the functionality of paging in the event handler of the button control or simply use the in-built commands.
  3. Customizing using a DataPager control:
    • The listview control basically implements IPageableItemContainer interface, hence it can use a Datapager control, because inherently it does not support paging, you need to implement paging.
  4. Importance of OnDataBound event:
    • This event is raised when the database data is bound to the data control.
    • If you notice in the OnDataBound event of any control we have filled the page index in the list controls.
    • So I can say that during paging, OnDatabound event can be used to load page index into the list control.


  • ASP.NET unleashed by Stephen Walther


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


About the Author

Rahul VB
Engineer EinfoChips.Ltd
India India
Born in India, have almost traveled around the country at an interval of every 2-3 years.
Now settled in a place where i am currently designated as a Senior Engineer :laugh.

My work experience lies in :
-> OS: VxWorks, WinCe, Windows
-> Languages : C,C#,Python,Javascript,SQL
-> Web / Desktop Application Development
-> Test Automation and Testing

The real trouble with reality is that there's no background music.

You may also be interested in...

Comments and Discussions

QuestionMore on images Pin
Abhinav S28-Apr-15 21:56
mvpAbhinav S28-Apr-15 21:56 
QuestionMy Vote of 5 Pin
varinder03076-May-14 3:09
membervarinder03076-May-14 3:09 
QuestionImages Pin
thatraja4-May-14 17:25
protectorthatraja4-May-14 17:25 
AnswerRe: Images Pin
Rahul VB4-May-14 17:29
professionalRahul VB4-May-14 17:29 
Question[My vote of 2] Needs work Pin
Forogar 4-May-14 8:55
member Forogar 4-May-14 8:55 
AnswerRe: [My vote of 2] Needs work Pin
Rahul VB4-May-14 16:53
professionalRahul VB4-May-14 16:53 
QuestionRe: [My vote of 2] Needs work Pin
Rahul VB6-May-14 2:55
professionalRahul VB6-May-14 2:55 
AnswerRe: [My vote of 2] Needs work Pin
Forogar 8-May-14 3:54
member Forogar 8-May-14 3:54 
GeneralMy vote of 1 Pin
d@nish 4-May-14 7:09
member d@nish 4-May-14 7:09 
Question[My vote of 1] My Vote of 1 Pin
d@nish 4-May-14 6:48
member d@nish 4-May-14 6:48 
AnswerRe: [My vote of 1] My Vote of 1 Pin
Rahul VB4-May-14 16:58
professionalRahul VB4-May-14 16:58 
GeneralMy first Article Pin
Rahul VB2-May-14 9:14
professionalRahul VB2-May-14 9:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170624.1 | Last Updated 29 Apr 2015
Article Copyright 2015 by Rahul VB
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid