How to create custom paging in Repeater control?


In this article I have explained about how to create custom paging in Repeater control like Google Paging/Grid view page. For example if we have lots records in the Repeater then difficult to see all that records in the same page of repeater control. So we need to implement paging in the repeater control.

Description
In my previous article I have explained about how to create custom paging in the DataList control. Similar like this we can create custom paging in Repeater control too.

The Repeater control in ASP.NET is used to show records from the database. The data display in the repeater control custom design. For example we cannot use custom design in grid view control, but it is possible to use custom design tables in data list and repeater controls in asp.net. Compare to Grid view and Data list, Repeater control is rapidly display records. But there is no option to edit / delete data in the repeater control.

In the below example code I have used table control inside of Repeater control for design my ouput data in custom format.

Client side


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Repeater Control Example</title>
<style type="text/css">
.htext
{
background-color: #970915;
color: White;
font-size: 12px;
font-weight: bold;
}
.celltext
{
background-color: #FFF6E1;
color: #000000;
font-size: 12px;
font-weight: bold;
padding-left: 10px;
}
a
{
text-decoration: none;
font-weight:bold;
}
a:hover
{
text-decoration: underline;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table align="center" width="700" cellspacing="0" cellpadding="0">
<tr>
<td height="40" style="padding-left: 10px;" colspan="2">
<b>Data Repeater Example</b>
</td>
</tr>
<tr>
<td width="50%" height="50">
Select number of items to be displayed per page
</td>
<td width="50%">
<asp:DropDownList ID="ddlIndex" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlIndex_SelectedIndexChanged">
</asp:DropDownList>
</td>
</tr>
<tr>
<td style="padding-left: 10px;" colspan="2" align="center">
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table width="600" cellpadding="0" cellspacing="0">
<tr>
<td width="200" height="30" class="htext">
<b>Employee No.</b>
</td>
<td width="200" class="htext">
<b>Employee Name</b>
</td>
<td width="200" class="htext">
<b>Employee Salary</b>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td height="30" class="celltext" >
<%#Eval("eno")%>
</td>
<td class="celltext">
<%#Eval("empname")%>
</td>
<td class="celltext">
<%#Eval("dept")%>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</td>
</tr>
<tr>
<td colspan="2">

</td>
</tr>

<tr>
<td colspan="2" align="center">
<table>
<tr>
<td colspan="5">

</td>
</tr>
<tr>
<td width="80" valign="top" align="center">
<asp:LinkButton ID="lnkFirst" runat="server" OnClick="lnkFirst_Click">First</asp:LinkButton>
</td>
<td width="80" valign="top" align="center">
<asp:LinkButton ID="lnkPrevious" runat="server" OnClick="lnkPrevious_Click">Previous</asp:LinkButton>
</td>
<td>
<asp:DataList ID="RepeaterPaging" runat="server" RepeatDirection="Horizontal" OnItemCommand="RepeaterPaging_ItemCommand"
OnItemDataBound="RepeaterPaging_ItemDataBound">
<ItemTemplate>
<asp:LinkButton ID="Pagingbtn" runat="server" CommandArgument='<%# Eval("PageIndex") %>'
CommandName="newpage" Text='<%# Eval("PageText") %> ' Width="20px"></asp:LinkButton>
</ItemTemplate>
</asp:DataList>
</td>
<td width="80" valign="top" align="center">
<asp:LinkButton ID="lnkNext" runat="server" OnClick="lnkNext_Click">Next</asp:LinkButton>
</td>
<td width="80" valign="top" align="center">
<asp:LinkButton ID="lnkLast" runat="server" OnClick="lnkLast_Click">Last</asp:LinkButton>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" align="center" height="30">
<asp:Label ID="lblpage" runat="server" Text=""></asp:Label>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

They are various template properties are used in the Repeater control. These three templates are mostly used template in the Repeater.

HeaderTemplate: HeaderTemplate is used to write header part of the Repeater control. In this code snippet I have used this template for write Header text for each column records.

ItemTemplate: ItemTemplate is used to bind repeated Item content in the Repeater Control. In this example I have used this template for bind datatable values in to the Repeater item.

FooterTemplate: Footer template is used to write text on the footer of Repeater control. Just I used this template for closing Table tag.

In the above code I have used one "RepaterPaging" data list. It is used to display page options like 1 2 3 …etc. based on the pages available in the Repeater Control.

Server side
In the server side code I have get selected items number per page by user from drop down list and bind that specified number of items in the Repeater control.

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

public partial class _Default : System.Web.UI.Page
{
PagedDataSource pgsource = new PagedDataSource();
int findex, lindex;
DataRow dr;

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
//During first time page load this method call
if (!Page.IsPostBack)
{
BindDataList();
LoadDDL();
}
}
}

DataTable GetData()
{
DataTable dtable = new DataTable();
//Create column names for Datatable "dtable"
dtable.Columns.Add("eno");
dtable.Columns.Add("empname");
dtable.Columns.Add("dept");
for (int i = 1; i <= 100; i++)
{
//Create rows for DataTable "dtable" and assign values for each column
dr = dtable.NewRow();
dr["eno"] = i;
dr["empname"] = "Empname " + i;
dr["dept"] = "Dept. Name ";
dtable.Rows.Add(dr);
}
//Return DataTable "dtable" with its data
return dtable;
}

private void BindDataList()
{
//Create new DataTable dt
DataTable dt = GetData();
pgsource.DataSource = dt.DefaultView;

//Set PageDataSource paging
pgsource.AllowPaging = true;

//Set number of items to be displayed in the Repeater using drop down list
if (ddlIndex.SelectedIndex == -1 || ddlIndex.SelectedIndex == 0)
{
pgsource.PageSize = 10;
}
else
{
pgsource.PageSize = Convert.ToInt32(ddlIndex.SelectedItem.Value);
}

//Get Current Page Index
pgsource.CurrentPageIndex = CurrentPage;

//Store it Total pages value in View state
ViewState["totpage"] = pgsource.PageCount;

//Below line is used to show page number based on selection like "Page 1 of 20"
lblpage.Text = "Page " + (CurrentPage + 1) + " of " + pgsource.PageCount;

//Enabled true Link button previous when current page is not equal first page
//Enabled false Link button previous when current page is first page
lnkPrevious.Enabled = !pgsource.IsFirstPage;

//Enabled true Link button Next when current page is not equal last page
//Enabled false Link button Next when current page is last page
lnkNext.Enabled = !pgsource.IsLastPage;

//Enabled true Link button First when current page is not equal first page
//Enabled false Link button First when current page is first page
lnkFirst.Enabled = !pgsource.IsFirstPage;

//Enabled true Link button Last when current page is not equal last page
//Enabled false Link button Last when current page is last page
lnkLast.Enabled = !pgsource.IsLastPage;

//Bind resulted PageSource into the Repeater
Repeater1.DataSource = pgsource;
Repeater1.DataBind();

//Create Paging with help of DataList control "RepeaterPaging"
doPaging();
RepeaterPaging.ItemStyle.HorizontalAlign = HorizontalAlign.Center;
}

private void doPaging()
{
DataTable dt = new DataTable();
//Add two column into the DataTable "dt"
//First Column store page index default it start from "0"
//Second Column store page index default it start from "1"
dt.Columns.Add("PageIndex");
dt.Columns.Add("PageText");

//Assign First Index starts from which number in paging data list
findex = CurrentPage - 5;

//Set Last index value if current page less than 5 then last index added "5" values to the Current page else it set "10" for last page number
if (CurrentPage > 5)
{
lindex = CurrentPage + 5;
}
else
{
lindex = 10;
}

//Check last page is greater than total page then reduced it to total no. of page is last index
if (lindex > Convert.ToInt32(ViewState["totpage"]))
{
lindex = Convert.ToInt32(ViewState["totpage"]);
findex = lindex - 10;
}

if (findex < 0)
{
findex = 0;
}

//Now creating page number based on above first and last page index
for (int i = findex; i < lindex; i++)
{
DataRow dr = dt.NewRow();
dr[0] = i;
dr[1] = i + 1;
dt.Rows.Add(dr);
}

//Finally bind it page numbers in to the Paging DataList "RepeaterPaging"
RepeaterPaging.DataSource = dt;
RepeaterPaging.DataBind();
}

private int CurrentPage
{
get
{ //Check view state is null if null then return current index value as "0" else return specific page viewstate value
if (ViewState["CurrentPage"] == null)
{
return 0;
}
else
{
return ((int)ViewState["CurrentPage"]);
}
}
set
{
//Set View statevalue when page is changed through Paging "RepeaterPaging" DataList
ViewState["CurrentPage"] = value;
}
}

protected void RepeaterPaging_ItemCommand(object source, DataListCommandEventArgs e)
{
if (e.CommandName.Equals("newpage"))
{
//Assign CurrentPage number when user click on the page number in the Paging "RepeaterPaging" DataList
CurrentPage = Convert.ToInt32(e.CommandArgument.ToString());
//Refresh "Repeater1" control Data once user change page
BindDataList();
}
}

protected void lnkFirst_Click(object sender, EventArgs e)
{
//If user click First Link button assign current index as Zero "0" then refresh "Repeater1" Data.
CurrentPage = 0;
BindDataList();
}

protected void lnkLast_Click(object sender, EventArgs e)
{
//If user click Last Link button assign current index as totalpage then refresh "Repeater1" Data.
CurrentPage = (Convert.ToInt32(ViewState["totpage"]) - 1);
BindDataList();
}

protected void lnkPrevious_Click(object sender, EventArgs e)
{
//If user click Previous Link button assign current index as -1 it reduce existing page index.
CurrentPage -= 1;
//refresh "Repeater1" Data
BindDataList();
}

protected void lnkNext_Click(object sender, EventArgs e)
{
//If user click Next Link button assign current index as +1 it add one value to existing page index.
CurrentPage += 1;

//refresh "Repeater1" Data
BindDataList();
}

void LoadDDL()
{
//Below code is used to bind values in the drop down list
for (int i = 1; i <= 10; i++)
{
ddlIndex.Items.Add(i.ToString());
}
ddlIndex.Items.Insert(0, new ListItem("--Select--", "--Select--"));
}

protected void ddlIndex_SelectedIndexChanged(object sender, EventArgs e)
{
//Set Default current index Zero default and refresh it page size based on Drop Down List selected
CurrentPage = 0;
BindDataList();
}

protected void RepeaterPaging_ItemDataBound(object sender, DataListItemEventArgs e)
{
//Enabled False for current selected Page index
LinkButton lnkPage = (LinkButton)e.Item.FindControl("Pagingbtn");
if (lnkPage.CommandArgument.ToString() == CurrentPage.ToString())
{
lnkPage.Enabled = false;
lnkPage.BackColor = System.Drawing.Color.FromName("#970915");
}
}
}

Output:
Output of the above code it look like this
Ouput1


Custom selection output
Ouput2

Source code:
Download the attached source code and try to change list of items to be display in the Repeater with help of drop down list.

Front End: ASP.NET
Code Behind: C#

Conclusion:
I hope this article is help to know about Repeater control and its uses in ASP.NET.


Attachments

  • Source_code (43120-24014-RepeaterControl.rar)
  • Comments

    Author: SivaSaiKrishna08 Sep 2011 Member Level: Silver   Points : 0

    Hi Ravindran,


    Nice Job , this will be useful for us.

    Thanks,
    SivaSaiKrishna.

    Author: Ravindran09 Sep 2011 Member Level: Diamond   Points : 0

    Thanks Siva

    Author: Suresh12 Sep 2011 Member Level: Gold   Points : 1

    Hi Ravi,

    It is good Article about custom paging in Repeater control.

    It is helpful to me.

    Good work.Keep it up..

    Regards
    S.Suresh

    Author: Ravindran13 Sep 2011 Member Level: Diamond   Points : 0

    Thanks Suresh !

    Guest Author: Chris20 Feb 2012

    Hi every body, swell chat board I have found It ilcerdibny useful and it's helped me out a lot .I hope to be able to contribute and support other users like this board has helped me

    Guest Author: Mahesh01 Jun 2012

    Hi Ravindran,

    Thanks for the post. It is very useful and easy understanding for beginners.

    Author: Ravindran01 Jun 2012 Member Level: Diamond   Points : 0

    thanks mahesh...

    Guest Author: Sandip15 Aug 2012

    Great Article...
    Was very much helpful for me...

    Thanks

    Guest Author: Tyng21 Jan 2013

    Hi,
    Could this paging apply to nested repeater?

    Thanks.

    Guest Author: Tyng21 Jan 2013

    Hi,

    Could this paging apply to nested repeater?

    Thanks.



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: