Pagination & Sorting as Usercontrol

Merryj
Posted by in ASP.NET category on for Intermediate level | Points: 250 | Views : 13973 red flag
Rating: 5 out of 5  
 4 vote(s)

It is a control used to move to any pages that we need .We can set the page size of the grid using this control. We can sort any column in ascending and descending order by just clicking corresponding heading with this control. Using this control users can move to the first and last page with just a button click. It also displays the total records and total number of pages available with respect to the given page size.


 Download source code for Pagination & Sorting as Usercontrol

Pagination & Sorting in User control

It is a control used to move to any pages that we need .We can set the page size of the grid using this control. We can sort any column in ascending and descending order by just clicking corresponding heading with this control. Using this control users can move to the first and last page with just a button click. It also displays the total records and total number of pages available with respect to the given page size.





Features


  1. Immediate page navigation

      If we change the value in the text box within the limit of the pages available it will call the event defined in code behind of aspx page for user control . Event in the code behind of aspx page will call the stored procedure to bind the listview.

  1. Define Records count / page

      If we change the drop down value then it will call the event defined in code behind of aspx page for user control . Event in the code behind of aspx page will call the stored procedure to bind the list view.

  2. Sort ascending or descending based on any of the field in list view by just clicking on heading.

      On clicking the heading the method defined in user control will be called ,and it will hide other images in the list view header and , call back the aspx page method with current column name and order as parameter . Method in the aspx page will call the stored procedure to bind the list view and make the corresponding image visible.


  3. Navigate to last and first page with a button click.

      With the click of the First Page it will send the page number as 1 .It will set the value of text box as the same. It will call the event defined in the code behind page of aspx page for user control . Event in the code behind of aspx page will call the stored procedure to bind the list view. With the click of the Last Page it will sent the page number as the maximum number of pages available. It will set the value of text box as the same. It will call the event defined in code behind of aspx page for user control. Event in the code behind of aspx page will call the stored procedure to bind the list view.

  4. Displays the total records

      When the page loads the user control will bind the value of the total records from the database by calling the method defined in aspx page with the page number specified in the text box as parameter from the user control . Method in the aspx page will call the stored procedure to bind the list view.


Stored Procedure


Create a Stored Procedure for each page for Selecting the needed columns in the List View with the parameters page number,page size, column name & order to which we need to apply sorting and the order in which we need to get it sorted (ascending or descending).


User Control

Make the above table as user control design. Define the functions and events. Inherit the interface that we created in Abstract class. To call the function from the user control we must use the following code in code behind of user control.




// write code here
AbstractClass page=(AbstractClass)Page;
page.ListGridview(CurrentPage,PageSize,SortOrder);
Design Page


Register the user control in the top of the aspx page where we add pagination.

// write code here
<%@ Register src="~/Paging.ascx" TagName="page" TagPrefix="uc1"%>
Now place the user control in the place we need it

<uc1:page ID="pageGrid" runat="server" Visible="true"/>
For each heading in the Grid we should add a link button. It should contain a Command Name which gives the id of the image next to it and Command Argument which contains the Column Name in the database. An image should be added to show whether it is in ascending order or descending order.
<asp:LinkButton ID="lnkCode" ToolTip="Click to sort" CssClass="lnkFont" CommandName="btnSortCode" CommandArgument="Code" runat="server">Route Code</asp:LinkButton>


<img src="~/Images/Down_Arrow.jpg" id="btnSortCode" runat="server" />

Code Behind


Method to bind grid should be over ridden from code behind. Call List View's Item Command event for sorting .

protected void lvRoute_ItemCommand(object sender,ListViewCommandEventArgs e)
{}


Inside this event we can call the functions that we declare in User Control. For that we should give usercontrolId.HideArrows() and usercontrolId.SortRecords().For Paging we should call the user control event Pager_Changed which is defined in User control.

protected void Pager_Changed(object sender,PagerEventArgs e)
{
var pageNumber=e.PageNumber;
var pageSize=e.PageSize;
ListGridview(pageNumber,pageSize,hdnSortOrder.Value);
}

Abstract Class


Create an abstract class in the App Code to create an abstract method to call this method from user control & to give the defenition of the same from the aspx.cs page. Create an interface to define two methods one to hide arrows in the grid and other to get the sort order of the grid.

public interface IMethods
{
void SortRecords(string buttonName,string ColumnName,HtmlImage lnkSortCode);
void HideSortIcons(string buttonName,string UniqueID);
}
public abstract class AbstractClass:System.Web.UI.Page
{
public AbstractClass()
{
}
public abstract string ListGridView(int CurrentPage,int PagingSize,string SortOrder);
}


Page copy protected against web site content infringement by Copyscape

About the Author

Merryj
Full Name: Merry Joseph
Member Level: Starter
Member Status: Member
Member Since: 4/28/2011 8:38:59 AM
Country: India

http://www.dotnetfunda.com

Login to vote for this post.

Comments or Responses

Posted by: Susanthampy on: 10/6/2011 | Points: 25
Goooooooooooood work Merry..................
Posted by: Jayapen on: 10/6/2011 | Points: 25
edi susa ninakku enna manasilayitta goooood work ennokkeuy parayunnathu
Posted by: Merryj on: 10/6/2011 | Points: 25
veruthe vide jayan chetta...................
Posted by: Jayakumars on: 10/10/2011 | Points: 25
hi

your code following error comes.

Error 1 The type or namespace name 'IMethods' could not be found (are you missing a using directive or an assembly reference?) C:\Documents and Settings\Administrator\Desktop\Pagination\Paging.ascx.cs 7 58 C:\...\Pagination\

Posted by: Merryj on: 10/10/2011 | Points: 25
Hi Jayakumar,

Have u used abstract class defined in my source code????? In that i am using an interface IMethods
Posted by: Jayakumars on: 10/10/2011 | Points: 25
Hi
if You done mine
can you post working full source code my email id:
This is my Email id : kumaraspcode2009@gmail.com
Posted by: Jayakumars on: 10/10/2011 | Points: 25
hi
Merryj

i am using below this ur abstract class.


public interface IMethods
{
void SortRecords(string strbuttonName, string strColumName, HtmlImage lnkSortCode);
void HideSortIcons(string strbuttonName, string UniqueID);
}

/// <summary>
/// Summary description for AbstractClass
/// </summary>
public abstract class AbstractClass : System.Web.UI.Page
{
public AbstractClass()
{
//
// TODO: Add constructor logic here
//
}

public abstract string ListGrdview(int CurrentPage,int PagingSize,string SortOrder);

}

Posted by: Merryj on: 10/10/2011 | Points: 25
sorry yaar i cant do that.If u have doubts in the code i ll be here to clear those doubts.
Regards
Merry
Posted by: Merryj on: 10/10/2011 | Points: 25
public partial class Paging : System.Web.UI.UserControl, IMethods
inherit that interface as shown above in ur user control
Posted by: Jayakumars on: 10/10/2011 | Points: 25
hi
Merryj

check this url
http://www.dotnetfunda.com/forums/thread6301-how-to-solve-this-imethods-errors-to-abstract-class-here.aspx
Posted by: Susanthampy on: 10/11/2011 | Points: 25
@Jayapen:- athokke parayunnathinu kaashu mudakk onnum illalo.....

enickum santhosham.... Merry ckum santhosham.............
Posted by: Merryj on: 10/11/2011 | Points: 25
@Susan:- :-) :-) :-)

Login to post response

Comment using Facebook(Author doesn't get notification)