Maximizing the DataPager control

The ListView control comes along with the DataPager control. In this example below, I tried to make this pager, work like the pager in ASP.net forum threads. Here’s how my example-page looks like.

img1

img2

img3

By default this pager works only with ListView, although we can alter the databound controls like Repeater, Gridview to make the DataPager work with them. That’s a different story though. Anyway, ListView is a super hybrid of Repeater, DataList, GridView control. Anything which those individual controls can do, ListView can do equally good. So this combination of ListView & Datapager along with UpdatePanel can help in many situations. The DataPager is not very efficient, since it retreives all rows of the underlying DataSource, hence paging with huge data , can run into performance issues. Anyway, here’s the complete code sample.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="DataPager4.aspx.cs" Inherits="DataPager4" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<b>Show <asp:DropDownList ID="DropDownList1" AutoPostBack="true" runat="server" AppendDataBoundItems="true" onselectedindexchanged="DropDownList1_SelectedIndexChanged"></asp:DropDownList> records per page</b>
<br /><br />
<asp:ListView ID="ListView1"  runat="server" >
<LayoutTemplate>
<table>
<tr>
<td><b>CustomerID </b></td>
<td><b>CompanyName</b></td>
<td><b>ContactName</b></td>
<td><b>ContactTitle</b></td>
<td><b>City</b></td>
</tr>
<tr id="itemPlaceholder" runat="server"></tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td><%# DataBinder.Eval(Container.DataItem, "CustomerID")%></td>
<td><%# DataBinder.Eval(Container.DataItem, "CompanyName")%></td>
<td><%# DataBinder.Eval(Container.DataItem, "ContactName")%></td>
<td><%# DataBinder.Eval(Container.DataItem, "ContactTitle")%></td>
<td><%# DataBinder.Eval(Container.DataItem, "City")%></td>
</tr>
</ItemTemplate>
</asp:ListView>

<br />
<hr />
<asp:DataPager ID="dp1" runat="server" PagedControlID="ListView1" >
<fields>
<asp:TemplatePagerField>
<PagerTemplate>
<b>Currently on
<asp:Label runat="server" ID="l1" Text="" />
of
<asp:Label runat="server" ID="l2" Text="" />
&nbsp;&nbsp;&nbsp;
</b>
</PagerTemplate>
</asp:TemplatePagerField>

<asp:NextPreviousPagerField ButtonType="Link"  FirstPageText="First |" ShowFirstPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" />
<asp:NextPreviousPagerField ButtonType="Link" LastPageText="Last  " ShowLastPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False"  />

<asp:TemplatePagerField>
<PagerTemplate>
&nbsp;&nbsp;
</PagerTemplate>
</asp:TemplatePagerField>

<asp:NextPreviousPagerField ButtonType="Link" NextPageText="Next |" ShowFirstPageButton="False" ShowNextPageButton="True" ShowPreviousPageButton="False" />
<asp:NextPreviousPagerField ButtonType="Link" PreviousPageText="Previous" ShowFirstPageButton="False" ShowNextPageButton="False" ShowPreviousPageButton="True" />

<asp:TemplatePagerField>
<PagerTemplate>
&nbsp;&nbsp;
</PagerTemplate>
</asp:TemplatePagerField>
<asp:NumericPagerField RenderNonBreakingSpacesBetweenControls="true"   CurrentPageLabelCssClass="PageItem" NumericButtonCssClass="PageItem" NextPreviousButtonCssClass="PageItem" />
</fields>
</asp:DataPager>
<hr />
</asp:Content>


 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

public partial class DataPager4 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            int _TotalRows = BindListView();
            for (int i = 5; i < _TotalRows; i++)
            {
                ListItem li = new ListItem(i.ToString(), i.ToString());
                DropDownList1.Items.Add(li);
                i = i + 9;
            }
            dp1.PageSize = 5;
        }
    }

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        dp1.PageSize = int.Parse(DropDownList1.SelectedValue);
        dp1.SetPageProperties(0, int.Parse(DropDownList1.SelectedValue), true);
        dp1.DataBind();
    }

    private int BindListView()
    {
        DataTable dt = DataLayer.GetMyData();
        ListView1.DataSource = dt;
        ListView1.DataBind();
        return dt.Rows.Count;
    }

    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);
        int _TotalRows = BindListView();

        Label l1 = (Label)(dp1.Controls[0].Controls[1]);
        Label l2 = (Label)(dp1.Controls[0].Controls[3]);
        if (dp1.StartRowIndex > 0)
        {
            l1.Text = (Math.Ceiling((decimal)dp1.StartRowIndex / dp1.PageSize) + 1).ToString();
        }
        else
        {
            l1.Text = "1";
        }
        l2.Text = dp1.TotalRowCount.ToString();
    }
    
}

Hope this helps. Thanks for reading.

Advertisements
This entry was posted in General ASP.Net C#. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s