Monday 3 October 2011

How to create custom paging in Repeater control?

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");            
        }
    }
}