Paging in ListView

Paging in ListView is pretty different from Paging in GridView.
We page data on a ListView using DataPager.
Its a joyful ride that has so many features we have dreamed of

Paging in GridView is with a twist and not an extension of gridview paging.
It uses the ListView event for Paging called
"OnPagePropertiesChanging"

Here is an example of doing it using two datapagers so that paging gets displayed
both on top and bottom of the page (google serach page style)
As used at almost all my examples, the database Northwind is used.

In ASPX

The Top Pager

<asp:UpdatePanel ID="updPanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div class="pager">
            <asp:DataPager ID="pgrTopDetails" runat="server"
                    PageSize="10"
                    PagedControlID="ListView1">
                <Fields>
                    <asp:NextPreviousPagerField ButtonCssClass="command"
                                        PreviousPageText="Previous"
                                        RenderDisabledButtonsAsLabels="true"
                                        RenderNonBreakingSpacesBetweenControls="true"
                                        ShowFirstPageButton="false"
                                        ShowNextPageButton="false"
                                        ShowLastPageButton="false"
                                        ShowPreviousPageButton="true"/>
                    <asp:NumericPagerField ButtonCount="10"
                                        NumericButtonCssClass="command" 
                                        CurrentPageLabelCssClass="current" 
                                        NextPreviousButtonCssClass="command"
                                        RenderNonBreakingSpacesBetweenControls="true"/> 
                    <asp:NextPreviousPagerField ButtonCssClass="command"
                                        NextPageText="Next"
                                        RenderDisabledButtonsAsLabels="true"
                                        ShowFirstPageButton="false"
                                        ShowPreviousPageButton="false"
                                        ShowNextPageButton="true"
                                        ShowLastPageButton="false" />
                </Fields>
            </asp:DataPager>
        </div>
        <asp:ListView ID="ListView1" runat="server"
                    DataKeyNames="ProductID"
                    OnPagePropertiesChanging="ListView1_PagePropertiesChanging">
            <LayoutTemplate>
                <table class="datatable">
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Quantity</th>
                        <th>Unit Price</th>
                        <th>In Stock</th>
                        <th>On Order</th>
                    </tr>
                    <tr id="itemPlaceholder" runat="server"></tr>
                </table>
            </LayoutTemplate>
            <ItemTemplate>
                <tr class="row">
                    <td><%# Eval("ProductID") %></td>
                    <td><%# Eval("ProductName") %></td>
                    <td><%# Eval("QuantityPerUnit") %></td>
                    <td><%# Eval("UnitPrice") %></td>
                    <td><%# Eval("UnitsInStock") %></td>
                    <td><%# Eval("UnitsOnOrder") %></td>
                </tr>
            </ItemTemplate>
        </asp:ListView>
        <div class="pager">
            <asp:DataPager ID="pgrBottomDetails" runat="server"
                        PageSize="10"
                        PagedControlID="ListView1">
                <Fields>
                    <asp:NextPreviousPagerField ButtonCssClass="command"
                                        PreviousPageText="Previous"
                                        RenderDisabledButtonsAsLabels="true"
                                        RenderNonBreakingSpacesBetweenControls="true"
                                        ShowFirstPageButton="false"
                                        ShowNextPageButton="false"
                                        ShowLastPageButton="false"
                                        ShowPreviousPageButton="true"/>
                    <asp:NumericPagerField ButtonCount="10"
                                        NumericButtonCssClass="command" 
                                        CurrentPageLabelCssClass="current" 
                                        NextPreviousButtonCssClass="command"
                                        RenderNonBreakingSpacesBetweenControls="true"/> 
                    <asp:NextPreviousPagerField ButtonCssClass="command"
                                        NextPageText="Next"
                                        RenderDisabledButtonsAsLabels="true"
                                        ShowFirstPageButton="false"
                                        ShowPreviousPageButton="false"
                                        ShowNextPageButton="true"
                                        ShowLastPageButton="false" />
                    <asp:TemplatePagerField>
                        <PagerTemplate>
                            <br />
                            Displaying&nbsp;<%# Container.StartRowIndex + 1 %>&nbsp;to&nbsp;
                            <%# Container.StartRowIndex + Container.PageSize %>&nbsp;of&nbsp;
                            (<strong><%# Container.TotalRowCount%></strong>) Profiles Found.
                        </PagerTemplate>
                    </asp:TemplatePagerField>
                </Fields>
            </asp:DataPager>
        </div>                             
    </ContentTemplate>
</asp:UpdatePanel>

In ASPX.CS

private static NorthwindClassesDataContext database;
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        database = new NorthwindClassesDataContext(ConfigurationManager
                        .ConnectionStrings["NorthwindConnectionString"]
                        .ConnectionString);
        BindListView();
    }
}
protected void ListView1_PagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)
{
    this.pgrTopDetails.SetPageProperties(e.StartRowIndex, e.MaximumRows, false);
    this.pgrBottomDetails.SetPageProperties(e.StartRowIndex, e.MaximumRows, false);
    //custom function to bind your listview
    BindListView();
}

private void BindListView()
{
    ListView1.DataSource = database.Products.OrderBy(p => p.ProductID);
    ListView1.DataBind();
}

Download Source Code(16kb)

Simple enough, right?
Happy Coding!

P.S: The above shown style is a shameless port of gridview style by Matt Berseth.

He is a wonderful coder with so many superb wonders done on DataPresentation Controls at .NET

Related Posts :