Many times
we have a practice of write a code for web service that returns all the data to
bind a grid. Best practice is implement paging and request for page level data from
web service. But in this case data source of grid will not able to know how
many more records yet it has. So we need to implement custom paging. Here by I
have written code for the same:
Step 1: create property for pager class
Step 2: Create user Control called CustomPager.Ascx
Step 3: Register this usercontrol to any page and give ID like “pagerPlayer“
Step 4: On the page load get event handler for page index changing
Step 5: Redisplay labels of paging
Step 1: create property for pager class
public class Pager
{
public int
CurrentPage { get; set;
}
public int TotalPage
{
get
{
return Convert.ToInt16(Math.Ceiling(Convert.ToDecimal((float)TotalRows
/ (float)PageSize )));
}
set { }
}
public int TotalRows
{ get; set; }
public int PageSize
{
get
{
return Convert.ToInt16(System.Configuration.ConfigurationSettings.AppSettings["Pagesize"].ToString());
}
set
{ }
}
public int StartIndex
{
get
{
return ((CurrentPage * PageSize) -
PageSize);
}
set { }
}
public int EndIndex
{
get
{
return StartIndex + PageSize - 1;
}
set { }
}
public Pager()
{
}
}
public class PagedObject<T>
{
public Pager
pager;
public List<T>
data;
}
Step 2: Create user Control called CustomPager.Ascx
Copy code
for Designer page:
<%@ Control
Language="C#"
AutoEventWireup="true"
CodeBehind="CustomPager.ascx.cs"
Inherits="MSP.UI.UserControls.CustomPager"
%>
<table class="wp100">
<tr class="gridPager">
<td colspan="9" style="padding-left:5px;padding-right:5px;">
<asp:LinkButton ID="lnkFirst"
runat="server"
OnClick="lnkPage_Click"
CssClass="padding5">First</asp:LinkButton>
<asp:LinkButton ID="lnkPrevious"
runat="server"
OnClick="lnkPage_Click"
CssClass="padding5">Prev</asp:LinkButton>
<asp:LinkButton ID="p0" runat="server" OnClick="lnkPage_Click" CssClass="padding5"></asp:LinkButton>
<asp:LinkButton ID="p1" runat="server" OnClick="lnkPage_Click" CssClass="padding5"></asp:LinkButton>
<asp:Label ID="lblCurrentPage"
runat="server"
CssClass="CurrentPage"></asp:Label>
<asp:LinkButton ID="p2" runat="server" OnClick="lnkPage_Click" CssClass="padding5"></asp:LinkButton>
<asp:LinkButton ID="p3" runat="server" OnClick="lnkPage_Click" CssClass="padding5"></asp:LinkButton>
<asp:LinkButton ID="lnkMore"
runat="server" OnClick="lnkPage_Click" CssClass="padding5">...</asp:LinkButton>
<asp:LinkButton ID="lnkNext"
runat="server"
OnClick="lnkPage_Click"
CssClass="padding5">Next</asp:LinkButton>
<asp:LinkButton ID="lnklast"
runat="server"
OnClick="lnkPage_Click"
CssClass="padding5">Last</asp:LinkButton>
<asp:Label ID="lblpage"
runat="server"
CssClass="right"
>
</asp:Label>
</td>
</tr>
</table>
Copy Code for Codebehind page:
public partial class CustomPager
: System.Web.UI.UserControl
{
public event EventHandler PageIndexChagned;
public MSPWebServiceConsumer.MSPService.Pager custompager
{
get
{
return (Pager)ViewState["PlayerList"];
}
set
{
try
{
ViewState["PlayerList"] = value;
DisplayLabel();
}
catch
{
//Execption On PreInit for DisplayLable() as
controls are not rendered
}
}
}
public CustomPager()
{
custompager = new Pager();
}
protected void
Page_Load(object sender, EventArgs e)
{
//DisplayLabel();
}
protected void
lnkPage_Click(object sender, EventArgs e)
{
if (PageIndexChagned != null)
PageIndexChagned(sender, e);
//DisplayLabel();
}
private void DisplayLabel()
{
lblpage.Text = "Page " +
custompager.CurrentPage.ToString() + " of
" + custompager.TotalPage.ToString();
lnkFirst.Visible = custompager.CurrentPage != 1;
lnkPrevious.Visible = custompager.CurrentPage != 1;
lnkNext.Visible = custompager.TotalPage != custompager.CurrentPage;
lnklast.Visible = custompager.TotalPage != custompager.CurrentPage;
lnkMore.Visible = (custompager.CurrentPage + 3 <=
custompager.TotalPage);
lblCurrentPage.Text = custompager.CurrentPage.ToString();
this.Visible = custompager.TotalPage > 1;
for (int page = 0;
page < custompager.TotalPage; page++)
{
if (custompager.CurrentPage - 2 > 0)
{
p0.Text = (custompager.CurrentPage - 2).ToString();
p0.Visible = true;
}
else
p0.Visible = false;
if (custompager.CurrentPage - 1 > 0)
{
p1.Text = (custompager.CurrentPage - 1).ToString();
p1.Visible = true;
}
else
p1.Visible = false;
if (custompager.CurrentPage + 1 <=
custompager.TotalPage)
{
p2.Text = (custompager.CurrentPage + 1).ToString();
p2.Visible = true;
}
else
p2.Visible = false;
if (custompager.CurrentPage + 2 <=
custompager.TotalPage)
{
p3.Text = (custompager.CurrentPage + 2).ToString();
p3.Visible = true;
}
else
p3.Visible = false;
}
}
}
Step 3: Register this usercontrol to any page and give ID like “pagerPlayer“
Step 4: On the page load get event handler for page index changing
public void
Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
pagerPlayer.custompager.CurrentPage = 1;
}
pagerPlayer.PageIndexChagned += new EventHandler(pagerPlayer_PageIndexChagned);
}
void pagerPlayer_PageIndexChagned(object sender, EventArgs
e)
{
switch (((System.Web.UI.Control)(sender)).ID
)
{
case "lnkNext":
{
pagerPlayer.custompager.CurrentPage =
pagerPlayer.custompager.CurrentPage + 1;
break;
}
case "lnkPrevious":
{
pagerPlayer.custompager.CurrentPage =
pagerPlayer.custompager.CurrentPage - 1;
break;
}
case "lnklast":
{
pagerPlayer.custompager.CurrentPage = pagerPlayer.custompager.TotalPage;
break;
}
case "lnkFirst":
{
pagerPlayer.custompager.CurrentPage = 1;
break;
}
default:
{
string buttontext = ((LinkButton)sender).Text;
if (buttontext == "...")
pagerPlayer.custompager.CurrentPage =
pagerPlayer.custompager.CurrentPage + 3;
else
pagerPlayer.custompager.CurrentPage
=Convert.ToInt16(buttontext);
break;
}
}
BindGrid();
}
Step 5: Redisplay labels of paging
Now Grid is bind and we are on a requested page Index. We again need to
change the paging labels to point current page. BindGrid() function should
return PagedObject class object. Reassign returned Pager object to pagerPlayer.custompager
pagerPlayer.custompager = returendata.pager;
So that the set property of custompager will reset labels.
Thanks,
Priyanka Shah
