In this article I am explaining how to use ASP.Net DropDownList along with ASP.Net GridView for Pagination to provide Jump To Page Number facility to the user.
Many occasions when we have too many pages it is not feasible to have all the page number listed as LinkButtons in such cases having a DropDownList holding all the page numbers is an appropriate solution. So let’s start with the tutorial.
GridView Markup
First you’ll have to drag an ASP.Net GridView control and a DropDownList control to the Asp.Net web page.
<div>
Jump To:
<asp:DropDownList ID="ddlJumpTo" runat="server"
OnSelectedIndexChanged = "PageNumberChanged" AutoPostBack = "true">
</asp:DropDownList>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns = "false"
AllowPaging = "true" PageSize = "10" PagerSettings-Visible = "false">
<Columns>
<asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="Country" HeaderText="Country" />
<asp:BoundField DataField="PostalCode" HeaderText="Postal Code" />
</Columns>
</asp:GridView>
</div>
You’ll notice above I have enabled pagination in the GridView but made the default GridView Pager invisible since we don’t need it. Also I have added a DropDownList with AutoPostBack set to true.
Database
For this tutorial I am using Microsoft’s NorthWind Database. You can download it using the link below
Download NorthWind Database
Stored Procedure
I’ll be using stored procedure to get the Customer records from the Customers table of NorthWind Database.
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE PROCEDURE [dbo].[spx_GetCustomers]
@TotalRows INT OUTPUT
AS
BEGIN
SET NOCOUNT ON;
SELECT ContactName, City, Country, PostalCode
FROM Customers
SELECT @TotalRows=COUNT(*)
FROM CUSTOMERS
END
Above I have declared an OUTPUT parameter which will be used to get the count of the total records present in the database table.
Binding the GridView
The following function is used to bind the GridView control with the records from the database table.
C#
private int BindGrid(int CurrentPageNo)
{
int TotalRows = 0;
DataTable dt = new DataTable();
String strConnString = System.Configuration.ConfigurationManager
.ConnectionStrings["conString"].ConnectionString;
SqlConnection con = new SqlConnection(strConnString);
SqlDataAdapter sda = new SqlDataAdapter();
SqlCommand cmd = new SqlCommand("spx_GetCustomers");
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add("@TotalRows", SqlDbType.Int)
.Direction = ParameterDirection.Output;
cmd.Connection = con;
sda.SelectCommand = cmd;
sda.Fill(dt);
TotalRows = (int)cmd.Parameters["@TotalRows"].Value;
GridView1.PageIndex = CurrentPageNo - 1;
GridView1.DataSource = dt;
GridView1.DataBind();
return TotalRows;
}
VB.Net
Private Function BindGrid(ByVal CurrentPageNo As Integer) As Integer
Dim TotalRows As Integer = 0
Dim dt As New DataTable()
Dim strConnString As String = System.Configuration.ConfigurationManager _
.ConnectionStrings("conString").ConnectionString
Dim con As New SqlConnection(strConnString)
Dim sda As New SqlDataAdapter()
Dim cmd As New SqlCommand("spx_GetCustomers")
cmd.CommandType = CommandType.StoredProcedure
cmd.Parameters.Add("@TotalRows", SqlDbType.Int) _
.Direction = ParameterDirection.Output
cmd.Connection = con
sda.SelectCommand = cmd
sda.Fill(dt)
TotalRows = CInt(cmd.Parameters("@TotalRows").Value)
GridView1.PageIndex = CurrentPageNo - 1
GridView1.DataSource = dt
GridView1.DataBind()
Return TotalRows
End Function
The above function simply calls the stored procedure we’ve created earlier, binds the records to the ASP.Net GridView control and returns the count total rows.
Populating the Page Number DropDownList
The following method populates the DropDownList that will hold the page numbers
C#
private void FillJumpToList(int TotalRows)
{
int PageCount = this.CalculateTotalPages(TotalRows);
for (int i = 1; i <= PageCount; i++)
{
ddlJumpTo.Items.Add(new ListItem(i.ToString(), i.ToString()));
}
}
VB.Net
Private Sub FillJumpToList(ByVal TotalRows As Integer)
Dim PageCount As Integer = Me.CalculateTotalPages(TotalRows)
For i As Integer = 1 To PageCount
ddlJumpTo.Items.Add(New ListItem(i.ToString(), i.ToString()))
Next
End Sub
The above function simply calls the CalculateTotalPages method which (described below) to get the count of the total pages and then populates the page number DropDownList
Calculating Count of Total Pages
The below method is used to get the count of total number of pages based using the GridView Page Size and the total records present in the database table.
C#
private int CalculateTotalPages(int intTotalRows)
{
int intPageCount = 1;
double dblPageCount = (double)(Convert.ToDecimal(intTotalRows)
/ Convert.ToDecimal(GridView1.PageSize));
intPageCount = Convert.ToInt32(Math.Ceiling(dblPageCount));
return intPageCount;
}
VB.Net
Private Function CalculateTotalPages(ByVal intTotalRows As Integer) As Integer
Dim intPageCount As Integer = 1
Dim dblPageCount As Double = CDbl((Convert.ToDecimal(intTotalRows) _
/ Convert.ToDecimal(GridView1.PageSize)))
intPageCount = Convert.ToInt32(Math.Ceiling(dblPageCount))
Return intPageCount
End Function
Handling the Page Change
The page change event is handled using the OnSelectedIndexChanged event of the ASP.Net DropDownList control which calls the following event handler
C#
protected void PageNumberChanged(object sender, EventArgs e)
{
int PageNo = Convert.ToInt32(ddlJumpTo.SelectedItem.Value);
this.BindGrid(PageNo);
}
VB.Net
Protected Sub PageNumberChanged(ByVal sender As Object, ByVal e As EventArgs)
Dim PageNo As Integer = Convert.ToInt32(ddlJumpTo.SelectedItem.Value)
Me.BindGrid(PageNo)
End Sub
PageLoad Event
Finally here is the page load event of the ASP.Net page. It does two jobs
1. Populates the GridView
2. Populates the page Number DropDownList
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
int TotalRows = this.BindGrid(1);
this.FillJumpToList(TotalRows);
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
Dim TotalRows As Integer = Me.BindGrid(1)
Me.FillJumpToList(TotalRows)
End If
End Sub
The screenshot below describes the working of the ASP.Net GridView Control with Jump To Page Number feature using DropDownList control
![Custom Pagination in ASP.Net GridView control using DropDownList Jump To feature]()
Demos
View Demo
Downloads
Download Code (5.87 kb)
