Custom paging in Repeater control in asp.net(C#, VB)

Click on Image to enlarge

Introduction: In previous articles i explained How to bind Repeater data control and How to bind, edit, update and delete data in Repeater. and Bind,Save,Edit,Update,Cancel,Delete,Paging example in GridView in asp.net C# and  How to Bind and implement Custom paging in asp.net DataList control in 3 different ways and  Delete multiple selected records based on CheckBox in GridView and  How to upload, download and delete files from GridView in Asp.net?
Now i am going to explain with example How to implement custom paging for repeater data control.

Description: Whenever large amount of data need to be displayed in Repeater control then we need of paging to break data in pieces. But as we all know there is no in built paging in Repeater control. But we can take the advantage of custom paging through which we can achieve same paging results as for other control like GridView. As it is custom paging we can also make it look different. Let’s take an example.

Implementation: Let's create an asp.net application to better understand the paging in repeater data control

• First of all Create database in Sql e.g. "MyDataBase" and in this create a table and name it "Book_Details"as:

• Now in the web.config file create the connection string to connect the asp.net application with the sql server database as.

<connectionStrings>

                                <add name="conStr" connectionString="Data Source=LocalServer;Initial Catalog=MyDataBase;Integrated Security=True"/>

                </connectionStrings>

Note: Replace the Data Source and Initial Catalog(i.e. Database name) as per your application.

• Now in the design page(.aspx) place two repeater controls, one for binding Book details and another for Paging as:

Source Code:

 <fieldset style="width:310px">

    <legend>Custom paging in Repeater</legend>

    <asp:Repeater ID="rptBooks" runat="server">

     <HeaderTemplate>  

        <table style=" border:1px solid #c1650f; width:300px" cellpadding="0">

<tr style="background-color:#ffa100; color:White">

<td colspan="2">

<b><center>Book Details</center></b>

</td>

</tr>

</HeaderTemplate>

<ItemTemplate>

<tr style="background-color:#ffa100">

<td>

<table style="background-color:#f7f7f7;border-top:1px dotted #c1650f; width:300px" >

<tr>

<td>

<b>Book Name:</b>

<asp:Label ID="lblBookName" runat="server" Text='<%#Eval("Book_Name") %>'/>

</td>

</tr>

<tr>

<td>

<b>Author:</b>

<asp:Label ID="lblAuthor" runat="server" Text='<%#Eval("Author") %>'/>

</td>

</tr>

<tr>

<td>

<b>Publisher:</b>

<asp:Label ID="lblPublisher" runat="server" Text='<%#Eval("Publisher") %>'/>

</td>

</tr>

<tr>

<td>

<b>Price:</b>

<asp:Label ID="lblPrice" runat="server" Text='<%#Eval("Price") %>'/>

</td>

</tr>

</table>

</td>

</tr>

</ItemTemplate>

<FooterTemplate>

</table>

</FooterTemplate>

    </asp:Repeater>

                    <div style="overflow: hidden;">

        <asp:Repeater ID="rptPaging" runat="server" onitemcommand="rptPaging_ItemCommand">

            <ItemTemplate>

                                <asp:LinkButton ID="btnPage"

                 style="padding:8px; margin:2px; background:#ffa100; border:solid 1px #666; font:8pt tahoma;"

                CommandName="Page" CommandArgument="<%# Container.DataItem %>"

                 runat="server" ForeColor="White" Font-Bold="True"><%# Container.DataItem %>

                                </asp:LinkButton>

           </ItemTemplate>

        </asp:Repeater>

        </div>

       </fieldset>

C#.Net Code to implement custom paging in repeater data control

• In the code behind file(.aspx.cs) write the code as:

First of all include the required namespaces and then write the code:

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

using System.Collections;

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            BindRepeater();

        }

    }

    protected void BindRepeater()

    {

        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conStr"].ConnectionString.ToString());

        SqlCommand cmd = new SqlCommand("Select * from Book_Details", con);

        if (con.State == ConnectionState.Closed)

        {

            con.Open();

        }

        DataTable dt = new DataTable();

        SqlDataAdapter adp = new SqlDataAdapter(cmd);

        adp.Fill(dt);

        PagedDataSource pgitems = new PagedDataSource();

        DataView dv = new DataView(dt);

        pgitems.DataSource = dv;

        pgitems.AllowPaging = true;

        pgitems.PageSize = 2;

        pgitems.CurrentPageIndex = PageNumber;

        if (pgitems.PageCount > 1)

        {

            rptPaging.Visible = true;

            ArrayList pages = new ArrayList();

            for (int i = 0; i < pgitems.PageCount; i++)

                pages.Add((i + 1).ToString());

            rptPaging.DataSource = pages;

            rptPaging.DataBind();

        }

        else

        {

            rptPaging.Visible = false;

        }

            rptBooks.DataSource = pgitems;

            rptBooks.DataBind();   

    }

    public int PageNumber

    {

        get

        {

            if (ViewState["PageNumber"] != null)

                return Convert.ToInt32(ViewState["PageNumber"]);

            else

                return 0;

        }

        set

        {

            ViewState["PageNumber"] = value;

        }

     }

    protected void rptPaging_ItemCommand(object source, RepeaterCommandEventArgs e)

    {

        PageNumber = Convert.ToInt32(e.CommandArgument) - 1;

        BindRepeater();

    }

VB.NET Code to implement custom paging in repeater data control

• In the design page place two repeater controls, one for binding Book details and another for Paging as:

Source Code:

 <fieldset style="width:310px">

    <legend>Custom paging in Repeater</legend>

    <asp:Repeater ID="rptBooks" runat="server">

     <HeaderTemplate>

           <table style=" border:1px solid #c1650f; width:300px" cellpadding="0">

<tr style="background-color:#ffa100; color:White">

<td colspan="2">

<b><center>Book Details</center></b>

</td>

</tr>

</HeaderTemplate>

<ItemTemplate>

<tr style="background-color:#ffa100">

<td>

<table style="background-color:#f7f7f7;border-top:1px dotted #c1650f; width:300px" >

<tr>

<td>

<b>Book Name:</b>

<asp:Label ID="lblBookName" runat="server" Text='<%#Eval("Book_Name") %>'/>

</td>

</tr>

<tr>

<td>

<b>Author:</b>

<asp:Label ID="lblAuthor" runat="server" Text='<%#Eval("Author") %>'/>

</td>

</tr>

<tr>

<td>

<b>Publisher:</b>

<asp:Label ID="lblPublisher" runat="server" Text='<%#Eval("Publisher") %>'/>

</td>

</tr>

<tr>

<td>

<b>Price:</b>

<asp:Label ID="lblPrice" runat="server" Text='<%#Eval("Price") %>'/>

</td>

</tr>

</table>

</td>

</tr>

</ItemTemplate>

<FooterTemplate>

</table>

</FooterTemplate>

    </asp:Repeater>

                    <div style="overflow: hidden;">

        <asp:Repeater ID="rptPaging" runat="server">

            <ItemTemplate>

                                <asp:LinkButton ID="btnPage"

                 style="padding:8px; margin:2px; background:#ffa100; border:solid 1px #666; font:8pt tahoma;"

                CommandName="Page" CommandArgument="<%# Container.DataItem %>"

                 runat="server" ForeColor="White" Font-Bold="True"><%# Container.DataItem %>

                                </asp:LinkButton>

           </ItemTemplate>

        </asp:Repeater>

        </div>   

    </fieldset>

• In the code behind file(.aspx.vb) write the code as:

Import the following required namespaces:

Imports System.Data

Imports System.Data.SqlClient

Imports System.Configuration

Imports System.Collections

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        If Not Page.IsPostBack Then

            BindRepeater()

        End If

    End Sub

    Protected Sub BindRepeater()

        Dim con As New SqlConnection(ConfigurationManager.ConnectionStrings("conStr").ConnectionString.ToString())

        Dim cmd As New SqlCommand("Select * from Book_Details", con)

        If con.State = ConnectionState.Closed Then

            con.Open()

        End If

        Dim dt As New DataTable()

        Dim adp As New SqlDataAdapter(cmd)

        adp.Fill(dt)

        Dim pgitems As New PagedDataSource()

        Dim dv As New DataView(dt)

        pgitems.DataSource = dv

        pgitems.AllowPaging = True

        pgitems.PageSize = 2

        pgitems.CurrentPageIndex = PageNumber

        If pgitems.PageCount > 1 Then

            rptPaging.Visible = True

            Dim pages As New ArrayList()

            For i As Integer = 0 To pgitems.PageCount - 1

                pages.Add((i + 1).ToString())

            Next

            rptPaging.DataSource = pages

            rptPaging.DataBind()

        Else

            rptPaging.Visible = False

        End If

        rptBooks.DataSource = pgitems

        rptBooks.DataBind()

    End Sub

    Public Property PageNumber() As Integer

        Get

            If ViewState("PageNumber") IsNot Nothing Then

                Return Convert.ToInt32(ViewState("PageNumber"))

            Else

                Return 0

            End If

        End Get

        Set(ByVal value As Integer)

            ViewState("PageNumber") = value

        End Set

    End Property

    Protected Sub rptPaging_ItemCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.RepeaterCommandEventArgs) Handles rptPaging.ItemCommand

        PageNumber = Convert.ToInt32(e.CommandArgument) - 1

        BindRepeater()

    End Sub

Now over to you:

"If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned for more technical updates."

• Tweet
• Share
• Share
• Share

Related Post