Custom Page Size And Paging For ASP.NET Grid View

Introduction

  • Here, I will explain how to set custom page size and paging for ASP.NET GridView.

Why We Need To Use Custom Page Size And Paging

  • We utilize default GridView paging, which means we are getting all the records from the database but we use Custom paging, which means we are getting a small amount of records (like 10 records).
  • For example, we have 20000 record in the database. We assume that 20000 data binds to GridView, then we set page size as 10. if we are not using custom paging GridView it means that the full 20000 data binds to GridView, but this process takes a lot of time because the data volume is high, so we decrease fetching time by using custom paging GridView.

Stored Procedure For Paging

  • The procedure, mentioned below, is used to fetch the page size, which is based on the records.
  • I set default page size as 10 so 10 records only return this procedure.
  1.    
  2. SET ANSI_NULLS ON    
  3. GO    
  4. SET QUOTED_IDENTIFIER ON    
  5. GO    
  6. -- === === === === === === === === === === === === === === === CREATE PROCEDURE GetCustomersPageWise    
  7. @PageIndex INT = 1, 
  8. @PageSize INT = 10, 
  9. @RecordCount INT OUTPUT  
  10.   
  11. AS    
  12. BEGIN    
  13.    SET NOCOUNT ON;   
  14.  
  15.    SELECT 
  16.       ROW_NUMBER() OVER(ORDER BY[CustomerID] ASCAS RowNumber, 
  17.       [CustomerID], 
  18.       [CompanyName], 
  19.       [ContactName]    
  20.       INTO #Results FROM[Customers]    

  21.    SELECT @RecordCount = COUNT( * )    
  22.    FROM #Results  
  23.   
  24.    SELECT * 
  25.    FROM #Results 
  26.       WHERE RowNumber BETWEEN(@PageIndex - 1) * @PageSize + 1 
  27.          AND(((@PageIndex - * @PageSize + 1) + @PageSize) - 1 

  28.    DROP TABLE #Results; 
  29. END 
  30. GO    

HTML code

Sample ASP.NET Front end code for custom grid is given below.

  • HTML given below has One DropDownList, GridView and Repeater.
    DropDownList is used to set Custom page size(Like 10,25,50). If you set custom page size to 10, only 10 pieces of data are fetched from the database then that data is shown on the grid.
  • Repeater control is used for pagination.
    1. <div> PageSize:  
    2.     <asp:DropDownList ID="ddlPageSize" runat="server" AutoPostBack="true" OnSelectedIndexChanged="PageSize_Changed">  
    3.         <asp:ListItem Text="10" Value="10" />  
    4.         <asp:ListItem Text="25" Value="25" />  
    5.         <asp:ListItem Text="50" Value="50" /> </asp:DropDownList>  
    6.     <hr />  
    7.     <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">  
    8.         <Columns>  
    9.             <asp:BoundField HeaderText="CustomerId" DataField="CustomerId" />  
    10.             <asp:BoundField HeaderText="ContactName" DataField="ContactName" /> .  
    11.             <asp:BoundField HeaderText="CompanyName" DataField="CompanyName" /> </Columns>  
    12.     </asp:GridView> <br />  
    13.     <asp:Repeater ID="rptPager" runat="server">  
    14.         <ItemTemplate>  
    15.             <asp:LinkButton ID="lnkPage" runat="server" Text='<%#Eval("Text") %>' CommandArgument='<%# Eval("Value") %>' Enabled='<%# Eval("Enabled") %>' OnClick="Page_Changed"></asp:LinkButton>  
    16.         </ItemTemplate>  
    17.     </asp:Repeater>  
    18. </div>  

C# Code

  1. private void GetGridDataPageWise(int pageIndex) {  
  2.     string constring = ConfigurationManager.ConnectionStrings["constring"].ConnectionString;  
  3.     using(SqlConnection con = new SqlConnection(constring)) {  
  4.         using(SqlCommand cmd = new SqlCommand("GetGridDataPageWise", con)) {  
  5.             cmd.CommandType = CommandType.StoredProcedure;  
  6.             cmd.Parameters.AddWithValue("@PageIndex", pageIndex);  
  7.             cmd.Parameters.AddWithValue("@PageSize"int.Parse(ddlPageSize.SelectedValue));  
  8.             cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4);  
  9.             cmd.Parameters["@RecordCount"].Direction = ParameterDirection.Output;  
  10.             con.Open();  
  11.             IDataReader idr = cmd.ExecuteReader();  
  12.             GridView1.DataSource = idr;  
  13.             GridView1.DataBind();  
  14.             idr.Close();  
  15.             con.Close();  
  16.             int recordCount = Convert.ToInt32(cmd.Parameters["@RecordCount"].Value);  
  17.             this.GetGridDataBasedonPageIndex(recordCount, pageIndex);  
  18.         }  
  19.     }  
  20. }  
  21. private void GetGridDataBasedonPageIndex(int recordCount, int currentPage) {  
  22.     double dblPageCount = (double)((decimal) recordCount / decimal.Parse(ddlPageSize.SelectedValue));  
  23.     int pageCount = (int) Math.Ceiling(dblPageCount);  
  24.     List < ListItem > pages = new List < ListItem > ();  
  25.     if (pageCount > 0) {  
  26.         pages.Add(new ListItem("First""1", currentPage > 1));  
  27.         for (int i = 1; i <= pageCount; i++) {  
  28.             pages.Add(new ListItem(i.ToString(), i.ToString(), i != currentPage));  
  29.         }  
  30.         pages.Add(new ListItem("Last", pageCount.ToString(), currentPage < pageCount));  
  31.     }  
  32.     rptPager.DataSource = pages;  
  33.     rptPager.DataBind();  
  34. }  
  35. protected void PageSize_Changed(object sender, EventArgs e) {  
  36.     this.GetGridDataPageWise(1);  
  37. }  
  38. protected void Page_Changed(object sender, EventArgs e) {  
  39.     int pageIndex = int.Parse((sender as LinkButton).CommandArgument);  
  40.     this.GetGridDataPageWise(pageIndex);  
  41. }  
Example

page

Advantage
  • We decrease data fetching time by using Custom Grid Paging.
Ebook Download
View all
Learn
View all