Monday, 22 September 2014

Paging and Sorting operations on Repeater Control programmatically with c#


            In this article I’m going to discuss about paging and sorting features of Repeater Control in ASP.Net.
 By default repeater control will not supporting paging and sorting features like grid view. Paging is concept which is used display the records in multiple pages. Sorting means which arrange the items in either Ascending order or Descending order.
Paging:-
Create repeater control by using below code in .aspx file.
<asp:Repeater ID="rptr" runat="server"  >
    <HeaderTemplate>
        <table border="1" >
            <tr> <td>
 <b><asp:LinkButton ID="lnkEid" runat="server" Text="EmpId" OnClick="lnkEid_Click"  /></b> </td>
                <td>
                   <b><asp:LinkButton ID="lnkName" runat="server" Text="Name" OnClick="lnkName_Click"  /></b>
                </td>
                <td>
                   <b><asp:LinkButton ID="lnkdept" runat="server" Text="Dept" OnClick="lnkdept_Click" /></b>
                </td>
                <td>
                   <b><asp:LinkButton ID="lnksal" runat="server" Text="Sal" OnClick="lnksal_Click" /></b>
                </td>
            </tr>       
    </HeaderTemplate>
    <itemtemplate>
        <tr> <td> <%#Eval("EmpId")%></td>
            <td> <%#Eval("Name")%></td>
            <td> <%#Eval("Dept")%></td>
            <td><%#Eval("Sal")%></td> </tr>
    </itemtemplate> <FooterTemplate>
        </table>
    </FooterTemplate></asp:Repeater>
In aspx.cs bind the data table to repeater control like below,
                    rptr.DataSource = dt;
                    rptr.DataBind();
Then the repeater control appears like below.
            Repeater will display the records like below in the same page. Now we have less records so no problem in displaying in single page. If we have 100 records in the list we can’t display in the single page so at that situation we need to go for paging technique.
To apply paging in repeater control we need to add two link buttons for previous and next.
<asp:LinkButton ID="lnkPrev" runat="server" Text="Prev" OnClick="lnkPrev_Click" />
<asp:LinkButton ID="lnkNxt" runat="server" Text="Next" OnClick="lnkNxt_Click" />
By this we can see those link buttons in our page. Like below shown figure.


            To perform this paging I have implemented one method like BindData(). In that write below code,
// creating PagedDataSource object.                              
                    PagedDataSource page = new PagedDataSource();

//get the data from database to DataTable dt.
                    DataTable dt = new DataTable();

//we can't perform the paging operation on table directly so we need make it as DataView dv.
                    DataView dv = new DataView(dt);
                    page.DataSource = dv;
                    page.AllowPaging = true;   
                    page.PageSize=5;                                  
                    page.CurrentPageIndex = Current;

//To make visible the Prev and Next buttons in pages .
                    lnkPrev.Visible = !page.IsFirstPage;
                    lnkNxt.Visible = !page.IsLastPage;                   
                    rptr.DataSource = page;
                    rptr.DataBind();

Here I have used Current property to pass the current page index.
public int Current  {
            get {
                object obj = ViewState["current"];
                if (obj == null)
                {   return 0;   }
                else   return (int)obj;
            }
            set { this.ViewState["current"] = value; }
        }
Click events for Next and Prev buttons
protected void lnkPrev_Click(object sender, EventArgs e)
        {
            try  {
                if (Current >= 1)
                {
                    Current--;
                    BindData();
                    
                }}
            catch (Exception){
            } }
        protected void lnkNxt_Click(object sender, EventArgs e)
        {
            if (Current >= count)
            {
                Current++;
                BindData();
                       
            } }





Sorting:-
After binding records to the repeater control it will display them whatever in order like below. I have used ViewState to pass the order to the Sort property by str static variable.
As well asc, dsc class level variables are created and assigned the values of,
String asc=”ASC”, dsc=”DESC”;
In the above list the records are not in any order, to make them in into some order ascending or descending we need to write below code.

To perform sorting operation i have implemented Sort () like below.
public void Sort()
        {
            ViewState["Order"] = str;
            using (SPSite site = new SPSite(SPContext.Current.Web.Url))
            {
                using (SPWeb web = site.OpenWeb())
                {
                    SPList list = web.Lists.TryGetList("Details");
                    SPListItemCollection item = list.GetItems();
                    DataTable dt = item.GetDataTable();
                    DataView dv = new DataView(dt);
                    if (str == "")
                    {
                        ViewState["Order"] = asc;
                        dv.Sort = ViewState["Column"].ToString() + " " + ViewState["Order"].ToString();
                        str = ViewState["Order"].ToString();
                    }
                    else if (str == asc)
                    {
                        ViewState["Order"] = dsc;
                        dv.Sort = ViewState["Column"].ToString() + " " + ViewState["Order"].ToString();
                        str = ViewState["Order"].ToString();
                    }
                    else  {
                        ViewState["Order"] = asc;
                        dv.Sort = ViewState["Column"].ToString() + " " + ViewState["Order"].ToString();
                        str = ViewState["Order"].ToString();
                    }
                    PagedDataSource pgds = new PagedDataSource();
                    pgds.DataSource = dv;
                    rptr.DataSource = pgds;
                    rptr.DataBind();
                }
            }
        }
While creating repeater control column names given as link buttons for future access.
When click on the column name it will arrange the respected column items are arranged in ascending order if they are ascending order it will arrange them to descending order. Here I have implemented sorting for every column. In each event I passed column name to the method to perform sorting based on the column name.
protected void lnkEid_Click(object sender, EventArgs e)
        {
            ViewState["Column"] = "EmpId";
            Sort();
        }
        protected void lnkName_Click(object sender, EventArgs e)
        {
            ViewState["Column"] = "Name";
            Sort(); }
protected void lnkdept_Click(object sender, EventArgs e)
        {
            ViewState["Column"] = "Dept";
            Sort();
        }
        protected void lnksal_Click(object sender, EventArgs e)
        {
            ViewState["Column"] = "Sal";
            Sort();
        }
            




When we click on the column header data will be arranged in the ascending order or descending order like above. And sorting is applied for every column of the table.

Paging With Sorting:-
Sorting with paging is also implemented, this it will sort particular page items in the ascending or descending order like below.







Thank You...!

11 comments: