Click here to Skip to main content
15,395,257 members
Articles / Web Development / ASP.NET
Posted 3 Mar 2008


29 bookmarked

Paging ListView With DataPager

Rate me:
Please Sign up or sign in to vote.
4.82/5 (12 votes)
3 Mar 2008CPOL
How to paging ListView with DataPager Programatically


Recently, I receive some e-mail about ListView from colleagues/friends who want to Paging the ListView, but the DataSource must be set programatically. Then, I do some tests and get the result that follows.


Paging the ListView with DataPager is very easy and you can't write some code. Just add and configure a DataSource, add a ListView, set the DataSource to ListView. Add a DataPager and configure it to ListView. Done!

Run app and enjoy it!

But, when the DataSource is set in code, some cautions must be done. Now, to populate the ListView, you must use the DataPager.

Using the code

Let't try. Add a ListView:

<asp:ListView ID="ListViewProducts" runat="server" ItemPlaceholderID="ProductItem">
        <div class="Product">
                <asp:Label runat="server" ID="LabelId" Text='<%# Eval("Id") %>'></asp:Label>
                <asp:Label runat="server" ID="LabelName" Text='<%# Eval("Name") %>'></asp:Label>
            <br />
                <asp:Label runat="server" ID="LabelDescription" Text='<%# Eval("Description") %>'></asp:Label>
        <asp:PlaceHolder runat="server" ID="ProductItem"></asp:PlaceHolder>
        <hr />

Then, add the DataPager:

<asp:DataPager ID="DataPagerProducts" runat="server" PagedControlID="ListViewProducts"
    PageSize="3" OnPreRender="DataPagerProducts_PreRender">
        <asp:NextPreviousPagerField ShowFirstPageButton="True" ShowNextPageButton="False" />
        <asp:NumericPagerField />
        <asp:NextPreviousPagerField ShowLastPageButton="True" ShowPreviousPageButton="False" />

See that the event OnPreRender was implemented. It's used to populate the ListView:

protected void DataPagerProducts_PreRender(object sender, EventArgs e)
    ProductList db = new ProductList();
    this.ListViewProducts.DataSource = db.GellAll();

I create two class to help this example:

1) Product: represent a product item;
2) ProductList: represent a database access layer.


using System;

/// <span class="code-SummaryComment"><summary></span>
/// Class that represent a product item.
/// <span class="code-SummaryComment"></summary></span>
public class Product
    private int? _Id;
    private string _Name;
    private string _Descrition;

    public Product(){}

    public Product(int Id, string Name, string Description)
        this._Id = Id;
        this._Name = Name;
        this._Descrition = Description;

    /// <span class="code-SummaryComment"><summary></span>
    /// Product Id
    /// <span class="code-SummaryComment"></summary></span>
    public int? Id
        get { return _Id; }
        set { _Id = value; }

    /// <span class="code-SummaryComment"><summary></span>
    /// Product Name
    /// <span class="code-SummaryComment"></summary></span>
    public string Name
        get { return _Name; }
        set { _Name = value; }

    /// <span class="code-SummaryComment"><summary></span>
    /// Product Complete Description
    /// <span class="code-SummaryComment"></summary></span>
    public string Description
        get { return _Descrition; }
        set { _Descrition = value; }

ProductList Class

using System;
using System.Collections.Generic;

/// <span class="code-SummaryComment"><summary></span>
/// Simulation of a Product Database
/// <span class="code-SummaryComment"></summary></span>
public class ProductList
    private IList<Product> _ProductDB = new List<Product>();

    public ProductList()
        this._ProductDB.Add(new Product(1, "Computer", "Complete hardware with software included."));
        this._ProductDB.Add(new Product(2, "Kitchen Calendar", "Beautiful caledar for your kitchen."));
        this._ProductDB.Add(new Product(3, "Shoes", "Most advanced anti-impact system in a small shoe."));
        this._ProductDB.Add(new Product(4, "Pen", "What you think, must be written. This pen is your helper."));
        this._ProductDB.Add(new Product(5, "Cell Phone", "Powerfull comunication thing. Today is part of your body. Get one more."));

    public IList<Product> GellAll()
        return this._ProductDB;

Points of Interest

Interesting Articles:



2008-03-03 - First insert.


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


About the Author

Brazil Brazil
No Biography provided

Comments and Discussions

QuestionPagePropertiesChanging with multiple datasource Pin
Member 1085816220-Dec-15 19:27
MemberMember 1085816220-Dec-15 19:27 
GeneralMy vote of 5 Pin
Dizimak20-Aug-13 23:57
MemberDizimak20-Aug-13 23:57 
GeneralMy vote of 5 Pin
its_Deebs30-May-13 7:43
Memberits_Deebs30-May-13 7:43 
QuestionOne More Solution of DataPager Pin
MustafaIqbal11-Nov-12 18:40
MemberMustafaIqbal11-Nov-12 18:40 
GeneralVery good Article Pin
Mohan Patha30-Oct-11 16:52
MemberMohan Patha30-Oct-11 16:52 
GeneralMy vote of 5 Pin
Patel Tariq Ahmed17-Sep-11 21:46
MemberPatel Tariq Ahmed17-Sep-11 21:46 
GeneralDon't bind the DataPager in PreRender() Pin
Ilya121-Jul-09 4:27
MemberIlya121-Jul-09 4:27 

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.