In this tutorial I will introduce paging data with the DataGrid server control
using the built-in paging capabilities. If you are interested in using the
custom paging, see my other article,
ASP.NET DataGrid Paging Part 2 - Custom Paging.
Downloadable source code includes versions of the code in this tutorial in both
VB and C#. You can download the source code here.
The DataGrid server control enables easy paging through data. You can set the
DataGrid to use paging and specify a page size (number of records to display).
Each time the page is loaded the DataSet is recreated and the DataGrid is bound
to the appropriate records based on what page is to be displayed and how many
records are on each page. The page of data to be displayed is set by the
DataGrid's
CurrentPageIndex
property. When using the built-in paging functionality you do not need to be
too concerned with this. The
CurrentPageIndex
property is handled behind the scenes. Next week when we cover custom paging
this property will become more important to us.
The CurrentPageIndex property identifies which page of data
is to be displayed in the DataGrid. When a page-navigation link is clicked the
CurrentPageIndex
property is updated. Figure 1.1 shows a typical ASP.NET Web Form with a
DataGrid set to page ten (10) records at a time.
Figure 1.1 - The DataGrid Sever Control set to page ten records at a time
Bring It On - The Setup
To setup a DataGrid to use the built-in paging function only requires a few
property settings. You must set the following:
-
AllowPaging=True
This tells the DataGrid to use the built-in paging functionality provided by
the .NET Framework
-
PageSize=[number of records per page]
This tells the DataGrid how many records should be displayed on each page
-
OnPageIndexChanged="[name of page changing event
handler]"
This points the DataGrid to the event handler that is called when a
page-navigation link is clicked
Listing 1.1 shows the ASP.NET Web Form used to create the page in Figure 1.1
Listing 1.1 - DataGrid Paging
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<html>
<head>
<title>DotNetJunkies.com - Paging in the DataGrid Part
1</title>
<script runat="server" language="VB">
Sub Page_Load(Source As Object, E As EventArgs)
If Not Page.IsPostBack Then
BindData()
End If
End Sub
Sub BindData()
Dim ds As New DataSet
Dim sda As SqlDataAdapter
Dim strSQL As String
Dim strCon As String
strSQL = "SELECT CompanyName, ContactName, " & _
" ContactTitle, Phone, Fax FROM Customers " &
_
" ORDER BY CompanyName" <
BR> strCon="server=localhost;database=Northwind;uid=sa;pwd=;"
sda = New SqlDataAdapter(strSQL, strCon)
sda.Fill(ds, "Customers")
myDataGrid.DataSource = ds.Tables("Customers")
myDataGrid.DataBind()
End Sub
Sub myDataGrid_PageChanger(Source As Object, _
E As DataGridPageChangedEventArgs)
' Set the CurrentPageIndex before binding the grid
myDataGrid.CurrentPageIndex = E.NewPageIndex
BindData()
End Sub
</script>
<style>
.DataGrid {font:x-small Verdana, Arial, sans-serif}
</style>
</head>
<body>
<form runat="server" method="post">
<asp:DataGrid runat="server" id="myDataGrid"
Border="0"
Cellpadding="4"
Cellspacing="0"
AlternatingItemStyle-BackColor="#EFEFEF"
ShowHeader="True"
CssClass="DataGrid"
HeaderStyle-BackColor="Black"
HeaderStyle-ForeColor="White"
HeaderStyle-Font-Bold="True"
AllowPaging="True"
PageSize="10"
PagerStyle-Mode="NumericPages"
OnPageIndexChanged="myDataGrid_PageChanger"
/>
</form>
</body>
</html> |
Break It Down
In Listing 1.1 I created a DataGrid and set it to display pages of ten (10)
records at a time. I also threw in a few properties to alter the display of the
DataGrid (I hate plain looking pages). There are two event handlers in this Web
Form, the
Page_Load()
event handler, and the
myDataGrid_PageChanger()
event handler. I also created another page-level method, the
BindData()
method. When the page is loaded the first time the
BindData()
method is called and the DataSet is created and a
Customers
table is added to it. Then the DataGrid is bound to the
Customers
table. This will display the first ten (10) records in the
Customers
table (since I set
PageSize=10). If the
Page.IsPostBack
property is true then the
BindData()
method is not called from the
Page_Load()
event handler.
When the page is rendered the first time, ten (10) records are displayed with a
series of page-navigation links below them. If one of the page-navigation links
is clicked a
PostBack
is triggered. Since I used an
If...Then
statement in the
Page_Load()
event handler, the
BindData()
method does not get called there. Rather, the
BindData()
method is called from the
myDataGrid_PageChanger()
event handler. This is what enables the paging to work properly. Since the
myDataGrid_PageChanger()
event handler is specified in the
OnPageIndexChanged
property of the DataGrid, the DataGrid's
CurrentPageIndex
property is changed by the .NET Framework when a page-navigation link is
clicked. The DataSet and DataTable are recreated, and the DataGrid is re-bound
to the
Customers
table, using the
CurrentPageIndex
value to set the appropriate page to display.
While I used
NumericPages
as the
PagerStyle-Mode
property, you could use
NextPrev
as the property value to display custom text for the next previous buttons.
Listing 1.2 shows the same page using the
NextPrev
value for the
PageStyle-Mode
property.
Listing 1.2 - Using NextPrev on a DataGrid
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<html>
<head>
<title>DotNetJunkies.com - Paging in the DataGrid Part
1</title>
<script runat="server" language="VB">
Sub Page_Load(Source As Object, E As EventArgs)
If Not Page.IsPostBack Then
BindData()
End If
End Sub
Sub BindData()
Dim ds As New DataSet
Dim sda As SqlDataAdapter
Dim strSQL As String
Dim strCon As String
strSQL = "SELECT CompanyName, ContactName, " & _
" ContactTitle, Phone, Fax FROM Customers " &
_
" ORDER BY CompanyName" <
BR> strCon="server=localhost;database=Northwind;uid=sa;pwd=;"
sda = New SqlDataAdapter(strSQL, strCon)
dsc.Fill(ds, "Customers")
myDataGrid.DataSource = ds.Tables("Customers").DefaultView
myDataGrid.DataBind()
End Sub
Sub myDataGrid_PageChanger(Source As Object, _
E As DataGridPageChangedEventArgs)
' Set the CurrentPageIndex before binding the grid
myDataGrid.CurrentPageIndex = E.NewPageIndex
BindData()
End Sub
</script>
<style>
.DataGrid {font:x-small Verdana, Arial, sans-serif}
</style>
</head>
<body>
<form runat="server" method="post">
<asp:DataGrid runat="server" id="myDataGrid"
Border="0"
Cellpadding="4"
Cellspacing="0"
AlternatingItemStyle-BackColor="#EFEFEF"
ShowHeader="True"
CssClass="DataGrid"
HeaderStyle-BackColor="Black"
HeaderStyle-ForeColor="White"
HeaderStyle-Font-Bold="True"
AllowPaging="True"
PageSize="10"
PagerStyle-Mode="NextPrev"
PagerStyle-NextPageText="Next ->"
PagerStyle-PrevPageText="<- Previous"
PagerStyle-Font-Bold="True"
OnPageIndexChanged="myDataGrid_PageChanger"
/>
</form>
</body>
</html> |
Figure 1.2 shows the output of Listing 1.2 using the
NextPrev
value for the
PagerStyle-Mode
property.
Figure 1.2 - Using Next and Previous links with the DataGrid
A Little More for Your Money
The DataGrid exposes a few additional
PagerStyle
properties for changing the display of the page-navigation links.
-
PagerStyle-PageButtonCount
This determines how many page links to display when using NumericPages. The
default is 10.
-
PagerStyle-Position=[Bottom | Top | TopAndBottom]
This specifies when the page-navigation links will be displayed.
-
PagerStyle-HorizontalAlign=[Center | Justify
| Left | NoSet | Right]
This determines the horizontal alignment of the page-navigation links.
Any of the standard Style Properties can be used with the
PagerStyle, such as
PagerStyle-Font-Bold
as in Listing 1.2.
Summary
In this tutorial I showed you how to used the built-in paging functionality with
the DataGrid. Next week I will show you how to build a custom paging function.