Allow the User to Specify the Number of Rows Displayed in a Paged DataGrid...

Date: January 30, 2003

This will be a very short article - more code than anything else. I've been asked several times lately how you can allow a user to specify the number of rows to show in a paged DataGrid. The answer is very simple. It only takes one line of code.

Below is an aspx page defining a DataGrid. I've loaded it up just for grins so if you see something new in there - good. It should all be pretty self-explanatory. The only thing to notice is that just above the DataGrid we have added a TextBox control where the user can type in the number of rows he/she wants to display in the grid. We have initially set the value to 10. The code-behind file will read the value from the textbox and dynamically set the DataGrid's PageSize property with that same value.
<%@ Page Language="vb" Src="SpecifyPaging.aspx.vb" Inherits="SpecifyPaging" %>

<html>
<head>
<title>User Specified Paging in a DataGrid</title>
</head>
<body>
<form runat="server">
Show <asp:TextBox id="txtNumRows" runat="server" columns="1" text="10" />
rows at a time
<asp:DataGrid runat="server" id="dataGrid"
              BorderWidth="1px"
              BackColor="White"
              BorderStyle="None"
              BorderColor="#999999"
              Cellpadding="3"
              GridLines="Vertical"
              ItemStyle-ForeColor="Black"
              ItemStyle-BackColor="#CCCCCC"
              AlternatingItemStyle-BackColor="#DCDCDC"
              ShowHeader="True"
              CssClass="DataGrid"
              HeaderStyle-BackColor="#000084"
              HeaderStyle-ForeColor="White"
              HeaderStyle-Font-Bold="True"
              AllowPaging="True"
              OnPageIndexChanged="PageIndexChanged_OnClick"
              PageSize="10"
              PagerStyle-Mode="NumericPages"
              PagerStyle-HorizontalAlign="Center"
              PagerStyle-ForeColor="Black"
              PagerStyle-BackColor="#999999">
</asp:DataGrid>
</form>
</body>
</html>
The code-behind file is shown below. Most of it is the usual database access code to get data from the Northwind database Customers table. In the last section you will see the PageIndexChanged_OnClick event handler. The first line of code there is "dataGrid.PageSize = txtNumRows.Text". There the page size will be set to whatever value is in the textbox. A nice additional feature would be to persist the user's value somehow (through use of a cookie perhaps?) so that the initial value would be set to whatever the user chose the last time he or she viewed the page.
Imports System
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Web.UI
Imports System.Web.UI.WebControls

Public Class SpecifyPaging : Inherits Page
  Protected WithEvents dataGrid As System.Web.UI.WebControls.DataGrid
  Protected WithEvents DataGrid1 As System.Web.UI.WebControls.DataGrid
  Protected WithEvents txtNumRows As System.Web.UI.WebControls.TextBox

  Sub Page_Load(Source As Object, E As EventArgs)
    If Not Page.IsPostBack Then
      BindData()
    End If
  End Sub

  Sub BindData()
    Dim strQuery As String = "SELECT CompanyName, ContactName, " _
      & "ContactTitle, Phone, Fax FROM Customers"
    Dim objConn As New SqlConnection( _
      ConfigurationSettings.AppSettings("ConnectionString"))
    Dim dataAdapter As New SqlDataAdapter(strQuery, objConn)
    Dim ds As DataSet

    ds = New DataSet()
    dataAdapter.Fill(ds)
    dataGrid.DataSource = ds
    dataGrid.DataBind()
  End Sub

  Sub PageIndexChanged_OnClick(Source As Object, E As DataGridPageChangedEventArgs)
    dataGrid.PageSize = txtNumRows.Text
    dataGrid.CurrentPageIndex = e.NewPageIndex
    BindData()
  End Sub

End Class
You may run the demo program here.
You may download the code here.