Custom Pagination In GridView With Formatting Using ASP.NET

Introduction

  • Here, I will explain how to use custom pagination in GridView with formatting, using ASP.NET.
  • Follow the steps mentioned below to achieve our requirement.
Step 1

Follow the code, mentioned below, to achieve the result Default.aspx.
  1. <asp:GridView ID="CustomGrid" runat="server" EnableModelValidation="True" AutoGenerateColumns="False" AllowPaging="True" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4″ ForeColor=" Black " GridLines="Vertical "    
  2.    EmptyDataText="No record found. " PageSize="2″>  
  3.     <AlternatingRowStyle BackColor="White" />  
  4.     <Columns>  
  5.   
  6.         <asp:TemplateField HeaderText="UserID">  
  7.             <ItemTemplate>  
  8.                 <asp:Label ID="lblUser" runat="server" Text=’<%# Eval( "ID") %>’></asp:Label>  
  9.             </ItemTemplate>  
  10.         </asp:TemplateField>  
  11.         <asp:BoundField DataField="NAME" HeaderText="Name">  
  12.         </asp:BoundField>  
  13.         <asp:BoundField DataField="PRICE" HeaderText="Price">  
  14.         </asp:BoundField>  
  15.     </Columns>  
  16.     <FooterStyle BackColor="#CCCC99″ />    
  17. <HeaderStyle BackColor=" #6B696B " Font-Bold="True " ForeColor="White " />    
  18. <PagerSettings FirstPageText="First " LastPageText="Last " NextPageText="Next " Position="TopAndBottom "    
  19. PreviousPageText="Prev " />    
  20. <PagerStyle BackColor="#F7F7DE " ForeColor="Black " HorizontalAlign="Right " />    
  21. <PagerTemplate>    
  22. <div>    
  23. <span style="float: right; ">    
  24. <asp:ImageButton ID="ImageButtonNext " runat="server " ImageUrl="~/images/r-arrow.png "    
  25. OnClick="ImageButtonNext_Click " />    
  26. </span><span style="float: right; padding-left: 5px; padding-right: 5px; ">    
  27. <asp:Label ID="LabelCurrentIndex " runat="server " Text=’<%= CurrentSelectedIndex %>’></asp:Label>    
  28. Of    
  29. <asp:Label ID="LabelLastIndex " runat="server " Text=’<%= TotalPageCount %>’></asp:Label>    
  30. </span><span style="float: right; ">    
  31. <asp:ImageButton ID="ImageButtonPrev " runat="server " ImageUrl="~/images/l-arrow.png "    
  32. OnClick="ImageButtonPrev_Click " />    
  33. </span>    
  34. </div>    
  35. </PagerTemplate>    
  36.    <RowStyle BackColor="#F7F7DE " />    
  37.    <SelectedRowStyle BackColor="#CE5D5A " Font-Bold="True " ForeColor="White " />    
  38.    </asp:GridView>    
  39. <input type="hidden " id="GridActiveIndex " value="0″ runat="server" />  
Step 2

Add the code, mentioned below, to Default.aspx.cs.
  1. public string currentSelectedIndex = string.Empty;  
  2. public string totalPageCount = string.Empty;  
  3. public string UserEmail = string.Empty;  
  4. protected void Page_Load(object sender, EventArgs e)  
  5. {  
  6.     if (!IsPostBack)  
  7.     {  
  8.         LoadData();  
  9.         int currentIndex = Convert.ToInt32(Convert.ToString(GridActiveIndex.Value));  
  10.         if (currentIndex > 0)  
  11.         {  
  12.             CustomGrid.PageIndex = currentIndex;  
  13.         }  
  14.   
  15.     }  
  16.   
  17. }  
  18.   
  19. private void LoadData()  
  20. {  
  21.     DataTable dt = new DataTable();  
  22.     dt = getResultTable();  
  23.     CustomGrid.DataSource = dt;  
  24.     CustomGrid.DataBind();  
  25.     GridActiveIndex.Value = '0″;  
  26.     FotmatPager(0);  
  27. }  
  28.   
  29. DataTable getResultTable()  
  30. {  
  31.     DataTable dtproduct = new DataTable();  
  32.     dtproduct.Columns.Add('ID'typeof(int));  
  33.     dtproduct.Columns.Add('NAME'typeof(string));  
  34.     dtproduct.Columns.Add('PRICE'typeof(int));  
  35.   
  36.     // Here we add five DataRows.  
  37.     dtproduct.Rows.Add(1, 'Product1″, 100);  
  38.     dtproduct.Rows.Add(2, 'Product2″, 110);  
  39.     dtproduct.Rows.Add(3, 'Product3″, 120);  
  40.     dtproduct.Rows.Add(4, 'Product4″, 130);  
  41.     dtproduct.Rows.Add(5, 'Product5″, 140);  
  42.   
  43.     return dtproduct;  
  44. }  
  45. #region GridVariable  
  46.   
  47. GridViewRow pagerRow;  
  48. int current_index;  
  49. int page_count;  
  50.  
  51. #endregion  
  52. public string CurrentSelectedIndex  
  53. {  
  54.     get { return currentSelectedIndex; }  
  55.     set { currentSelectedIndex = value; }  
  56. }  
  57. public string TotalPageCount  
  58. {  
  59.     get { return totalPageCount; }  
  60.     set { totalPageCount = value; }  
  61. }  
  62. protected void formatTopPager(int current, int total)  
  63. {  
  64.     try  
  65.     {  
  66.         pagerRow = CustomGrid.TopPagerRow;  
  67.         Label lblcurrentindex =  
  68.         (Label)pagerRow.Cells[0].FindControl('LabelCurrentIndex');  
  69.         lblcurrentindex.Text = current.ToString();  
  70.         Label lbllastindex =  
  71.         (Label)pagerRow.Cells[0].FindControl('LabelLastIndex');  
  72.         lbllastindex.Text = total.ToString();  
  73.         CurrentSelectedIndex = current.ToString();  
  74.         TotalPageCount = total.ToString();  
  75.     }  
  76.     catch (Exception)  
  77.     {  
  78.   
  79.     //throw;  
  80.     }  
  81. }  
  82. protected void fotmatBottomPager(int current, int total)  
  83. {  
  84.     try  
  85.     {  
  86.         pagerRow = CustomGrid.BottomPagerRow;  
  87.         Label lblcurrentindex =  
  88.         (Label)pagerRow.Cells[0].FindControl('LabelCurrentIndex');  
  89.         lblcurrentindex.Text = current.ToString();  
  90.         Label lbllastindex =  
  91.         (Label)pagerRow.Cells[0].FindControl('LabelLastIndex');  
  92.         lbllastindex.Text = total.ToString();  
  93.         CurrentSelectedIndex = current.ToString();  
  94.         TotalPageCount = total.ToString();  
  95.     }  
  96.     catch (Exception)  
  97.     {  
  98.   
  99.     // throw;  
  100.     }  
  101.   
  102. }  
  103.   
  104. protected void FotmatPager(int current)  
  105. {  
  106.     ViewState["currentPageIndex"] = current;  
  107.     current += 1;  
  108.   
  109.     int total = CustomGrid.PageCount;  
  110.     formatTopPager(current, total);  
  111.     fotmatBottomPager(current, total);  
  112.     CustomGrid.PageIndex = Convert.ToInt32(Convert.ToString(ViewState["currentPageIndex"]));  
  113.   
  114. }  
  115.   
  116. protected void ManageGridLayout(DataTable dt, int selected_pageIndex, int totalPage)  
  117. {  
  118.   
  119.     CustomGrid.PageIndex = selected_pageIndex;  
  120.     CustomGrid.DataSource = getResultTable();  
  121.     CustomGrid.DataBind();  
  122.     FotmatPager(selected_pageIndex);  
  123.   
  124. }  
  125.   
  126. protected void ImageButtonNext_Click(object sender, ImageClickEventArgs e)  
  127. {  
  128.     current_index = CustomGrid.PageIndex;  
  129.     page_count = CustomGrid.PageCount;  
  130.     if (current_index + 1 < page_count)  
  131.     ManageGridLayout(getResultTable(), current_index + 1, page_count);  
  132. }  
  133.   
  134. protected void ImageButtonPrev_Click(object sender, ImageClickEventArgs e)  
  135. {  
  136.     current_index = CustomGrid.PageIndex;  
  137.     page_count = CustomGrid.PageCount;  
  138.     if (current_index > 0)  
  139.     ManageGridLayout(getResultTable(), current_index – 1, page_count);  
  140.   
  141. }  
Output

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now