An Extensive Examination of the DataGrid Web Control: Part 15, Part 2

By Scott Mitchell

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.

- continued -

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>

[View a Live Demo!]

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>

[View a Live Demo!]

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:

<form runat="server"> <asp:DataGrid runat="server" id="dgPopularFAQs" ...> ... <PagerStyle NextPageText="Next -->" PrevPageText="<-- Prev." HorizontalAlign="Right" /> </asp:datagrid> </form>

[View a Live Demo!]

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!)

<form runat="server"> <asp:DataGrid runat="server" id="dgPopularFAQs" ...> ... <PagerStyle Mode="NumericPages" HorizontalAlign="Center" /> </asp:datagrid> </form>

[View a Live Demo!]

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.

Happy Programming!

By Scott Mitchell