DataPager and ListView

Different from GridView, ListView can’t have the paging function automatically if you set the attribute “AutoPaging=true”, and this is where the DataPager comes into play.

We can get the paging function for ListView easily with the help of the DataPager. We only need to put the control DataPager in the proper position in the <LayoutTemplate>, just like below,

<asp:ListView ID="SomeListView"  runat="server" DataSourceID="SomeListViewObjectDataSource"
 onsorting="SomeListViewSortingEventHandler" OnDataBound="SomeListView_DataBound" >

    <LayoutTemplate>

     <table id="SomeView" class="list-view">
        <tr>
            <th scope="col">
               <asp:LinkButton ID="SortByID" runat="server" CommandName="Sort" CommandArgument="Id" Width="60px">ID</asp:LinkButton>
            </th>

            <!-- other th here-->
        </tr>
        <tr id="itemPlaceHolder" runat="server" style="100%"/>

        <tr id="DataPagerRow" runat="server">

            <td colspan="8" style="height:30px">

                <asp:DataPager ID="SomeDataPager" runat="server" PageSize="25" PagedControlID="SomeListView" EnableViewState="false">

                    <Fields>
                        <asp:NumericPagerField ButtonType="Link" ButtonCount="10" NumericButtonCssClass="PageLinkButton" CurrentPageLabelCssClass="PageLinkButton"/>
                    </Fields>

                </asp:DataPager>

            </td>
        </tr>
     </table>
    </LayoutTemplate>

    <ItemTemplate>
       <!--Concrete content here-->
    </ItemTemplate>

</asp:ListView>

Please note that we need to set the attribute PageControlID to the ID of the ListView, SomeListView in this case. 

We can also set the style of the page link button by setting the attributes “NumericButtonCssClass” and “CurrentPageLabelCssClass”.

Till now, everything is easy and intuitive. Just one thing to note about the attribute “EnableViewState” for the DataPager. Sometimes, we may encounter some exception messages, saying failed to load ViewState information when switching between different pages. If this happens, try to set the attribute “EnableViewState” to false, this might help.

OK, another thing to point out. What if there is only one page of data for the ListView? By default, the page link button will always show no matter how many pages in total. But, from the perspective of users, showing page number is against one’s intuitive idea if there is only one page. So the question is, how can we hide the page link button when there is only one page of data in total?

The answer to this question is not difficult, as there is already a property for this purpose, “Visible”.  We can set this property to false if there is only one page. But how? Where to code this logic? OK, we need to handle an event, saying “OnDataBound” of the ListView.  This is reasonable, only when the data for the ListView is bound can we know how many pages will be shown in the page. The code is as below,

protected void SomeListView_DataBound(object theSender, EventArgs theEventArgs)
{
    DataPager aDataPager = (DataPager)SomeListView.FindControl("SomeDataPager");

    if (aDataPager != null)
    {
        aDataPager.Visible = (aDataPager.PageSize + 1) < aDataPager.TotalRowCount;
    }

}

This is fine. But how can we hide the table row around the page link button as well? This require some tricks. We need to find the table row in server side and then set the property “Visible” to false.  In order to get that table row, we need to give an unique ID for the table row and add the attribute “runat=server”, then the code changes to like below,

protected void SomeListView_DataBound(object theSender, EventArgs theEventArgs)
{
    DataPager aDataPager = (DataPager)SomeListView.FindControl("SomeDataPager");

    if (aDataPager != null)
    {
        aDataPager.Visible = (aDataPager.PageSize + 1) < aDataPager.TotalRowCount;

        HtmlTableRow aTableRow = (HtmlTableRow)SomeListView.FindControl("DataPagerRow");

        aTableRow.Visible = aDataPager.Visible;
    }

}

In addition, there is another method of DataPager worthy of  mention,  that’s SetPageProperties.

This method can be used to switch to a specific page without clicking the page link button manually.  Let’s say, we can make the DataPager switch to some page when some condition is met programmically.