In Part 1 we discussed the differences between default and custom
paging, and examined how the DataGrid implements paging in high-level terms. In this part, we'll examine
the steps needing to be taken and the code that needs to be added in order to create a pageable DataGrid.
Working with Default Paging
To demonstrate how to add paging support to a DataGrid, let's first take a look at code to display
non-paged data first, and then examine the steps needed to "upgrade" the DataGrid to a pageable one.
Here is a simple ASP.NET Web page that displays the rows from the ASPFAQs.com database:
<% @Import Namespace="System.Data" %>
<% @Import Namespace="System.Data.SqlClient" %>
<script language="vb" runat="server">
Sub Page_Load(sender as Object, e as EventArgs)
BindData()
End Sub
Sub BindData()
'1. Create a connection
Dim myConnection as New SqlConnection(connection string)
'2. Create the command object, passing in the SQL string
Dim strSQL as String = "SELECT FAQID, Description " & _
"FROM tblFAQs ORDER BY FAQID"
Dim myCommand as New SqlCommand(strSQL, myConnection)
'Set the datagrid's datasource to the datareader and databind
myConnection.Open()
dgPopularFAQs.DataSource = myCommand.ExecuteReader()
dgPopularFAQs.DataBind()
myConnection.Close()
End Sub
</script>
<asp:DataGrid runat="server" id="dgPopularFAQs"
BackColor="#eeeeee" Width="85%"
HorizontalAlign="Center"
Font-Name="Verdana"
Font-Size="10pt">
<HeaderStyle BackColor="Black" ForeColor="White" Font-Bold="True"
HorizontalAlign="Center" />
<AlternatingItemStyle BackColor="White" />
</asp:DataGrid>
Now, taking this simple example we only need to make the following additions:
Set the DataGrid's AllowPaging property to True. This can be accomplished by
simply adding AllowPaging="True" in the DataGrid declaration.
Place the DataGrid within a Web Form (the <form runat="server">). This is needed
because navigating through each of the DataGrid's pages of data incurs a postback.
Update the BindData() method to use a DataSet instead of a SqlDataReader.
Add an event handler for the DataGrid's PageIndexChanged event.
The first two steps are brainless ones, and the third one is not too difficult either. The fourth one
seems as if it may be the most difficult, but fortunately, it is quite simple too (with
default paging). All the PageIndexChanged event handler needs to do is set the DataGrid's
CurrentPageIndex property to the page of data the user wishes to see, and then rebind
the DataGrid. The new, complete code can be seen below:
<% @Import Namespace="System.Data" %>
<% @Import Namespace="System.Data.SqlClient" %>
<script language="vb" runat="server">
Sub Page_Load(sender as Object, e as EventArgs)
BindData()
End Sub
Sub BindData()
'1. Create a connection
Dim myConnection as New SqlConnection(connection string)
'2. Create the command object, passing in the SQL string
Dim strSQL as String = "SELECT FAQID, Description " & _
"FROM tblFAQs ORDER BY FAQID"
Dim myCommand as New SqlCommand(strSQL, myConnection)
Dim myAdapter as New SqlDataAdapter(myCommand)
Dim ds as New DataSet()
myAdapter.Fill(ds)
'Set the datagrid's datasource to the DataSet and databind
dgPopularFAQs.DataSource = ds
dgPopularFAQs.DataBind()
myConnection.Close()
End Sub
Sub NewPage(sender As Object, e As DataGridPageChangedEventArgs)
dgPopularFAQs.CurrentPageIndex = e.NewPageIndex
BindData()
End Sub
</script>
<form runat="server">
<asp:DataGrid runat="server" id="dgPopularFAQs"
BackColor="#eeeeee" Width="85%"
HorizontalAlign="Center"
Font-Name="Verdana"
Font-Size="10pt"
AllowPaging="True"
OnPageIndexChanged="NewPage">
<HeaderStyle BackColor="Black" ForeColor="White" Font-Bold="True"
HorizontalAlign="Center" />
<AlternatingItemStyle BackColor="White" />
</asp:datagrid>
</form>
The bold text indicates the changes from the previous example. The first thing to note is the
NewPage() subroutine, which is the event handler for the DataGrid's PageIndexChanged
event. Notice that all it does is set the CurrentPageIndex property and rebind the database
data to the DataGrid. Simple! Another thing to take note of is that we made a small change to the
BindData() method, binding a DataSet to the DataGrid as opposed to a
SqlDataReader. The reason we did this is because default paging requires that the DataGrid
be able to determine the number of total records in the DataSource. This is possible
with the DataSet, but not with the SqlDataReader, hence the change.
If You Try to Use a SqlDataReader
If you accidentally attempt to use a SqlDataReader with default paging, as opposed to
a DataSet, you will get the following error message:
AllowCustomPaging must be true and VirtualItemCount must be set for a DataGrid with ID DataGridID when AllowPaging is set to true and the selected datasource does not implement ICollection.
Customizing the Navigational Interface
If you check out the live demo you'll see that, by default,
the DataGrid displays the navigational interface as < and > hyperlinks, to navigate to the previous
and next pages, respectively. This paging interface can be customized using the PagerStyle property of
the DataGrid.
There are two built-in paging styles:
Next/Previous - in this paging style, the user can move just to the immediately next or immediately
previous page, and
Numeric Pages - in this paging style, the user can jump to a particular page.
The Next/Previous paging style is the default. You can customize this paging style by setting the
NextPageText and PrevPageText properties to the text that you want to
appear for the next and previous hyperlinks. To specify what paging style to use (Next/Previous vs.
Numeric Pages), set the Mode property to either NextPrev or NumericPages.
For example, the following DataGrid declaration demonstrates customizing the Next/Previous paging
interface:
And the following DataGrid declaration demonstrates using the Numeric Pages interface. (Be sure
to view both the associated live demos in order to see the various pager styles in action!)
Conclusion
In this article we looked at the paging support in the DataGrid, including the differences between
default and custom paging. We then examined the steps necessary to implement default paging in a DataGrid,
as well as how to customize the paging interface.
For an in-depth look at custom paging, be sure to check out my book, ASP.NET Data
Web Controls Kick Start.
