Getting On The Same Page With Your DataGrid

12.11.03

^ click above ^

By Roger McCook

The purpose of this article is to give a succinct, understandable overview of how to setup a DataGrid so that you can page through the records of a data source. To demonstrate how this is done, I'm going to take actual code from an application I developed for a large telecommunications company. I use Visual Studio and that is reflected in this article.

In Visual Studio, drop a DataGrid control from the WebForms section of the toolbox onto the web page. If you switch to HTML view of the page, you'll see some very simple syntax similar to the following:

<asp:DataGrid id="DataGrid1" style="Z-INDEX: 116; LEFT: 33px; POSITION: absolute; TOP: 104px" runat="server"></asp:DataGrid>

Returning to the design view, I position my control where I want it and start setting properties using the control properties window. After a little tweaking here and there, I return to the HTML view and find my HMTL code has grown:

On The Scene At Search Engine Strategies

Our WebProNews editor, Garrett French will be reporting live from the Search Engine Strategies Conference in Chicago. Look for interviews from representatives from all the major search engine companies.

On The Scene Forum

<asp:DataGrid 
            

            runat="server" 

            id="myDataGrid" 

            Border="0" 

            Cellpadding="4" 

            AlternatingItemStyle-BackColor="#EFEFEF" 

            HeaderStyle-BackColor="Black" 

            HeaderStyle-ForeColor="White" 

            HeaderStyle-Font-Bold="True" 

            AllowPaging="True" 

            PagerStyle-Mode="NextPrev" 

            PagerStyle-NextPageText="Next ->" 

            PagerStyle-PrevPageText="<- Previous" 

            PagerStyle-Font-Bold="True" 

            OnPageIndexChanged= "myDataGrid_PageChanger" 

            style="Z-INDEX: 115; LEFT: 160px; 

            POSITION: absolute; TOP: 151px" Width="501px" 

            AutoGenerateColumns="False"> 

            

            <AlternatingItemStyle BackColor="#EEF5FA"> 

            </AlternatingItemStyle> 

            

            <HeaderStyle Font-Bold="True" ForeColor="White" BackColor="#6FB1D9"> 
            

            </HeaderStyle> 

            

            <Columns> 

            <asp:BoundColumn Visible="False" DataField="ID" HeaderText="ID"></asp:BoundColumn> 
            

            <asp:BoundColumn DataField="DOC NUMBER" HeaderText="DOC NUMBER"></asp:BoundColumn> 
            

            <asp:BoundColumn DataField="TITLE" HeaderText="TITLE"></asp:BoundColumn> 
            

            </Columns> 

            

            <PagerStyle 

            NextPageText="Next ->" 

            Font-Bold="True" 

            PrevPageText="<- Prev"> 

            </PagerStyle> 

            

            </asp:DataGrid>

Wow! A lot has happened but most of the code was generated by Visual Studio just by me tinkering with the properties. Let's consider a few of the properties now.

AllowPaging="True"

This property has to be set to True to enable paging. If set to False, paging will not work.

AutoGenerateColumns="False"

Get TheDevWeb NewsletterFree - ">Click Here

In this particular case, I set this property to false because I am using bound columns. This gives me a little more control. For instance, I can set the visibility of the first column (the ID column) to false and I can change the other column headers to some text which is not necessarily the same as the data source column headings. You don't have to do this.

OnPageIndexChanged="myDataGrid_PageChanger"

This piece of code was not automatically generated by Visual Studio. I had to shift to HTML view and enter it by hand. Don't leave it out. It is critical for getting paging to work. This is telling the program to call the procedure named "myDataGrid_PageChanger" whenever you change pages (click the pager link).

I need to write the "myDataGrid_PageChanger" routine myself. Here is the syntax that I put in the code-behind page.

Sub myDataGrid_PageChanger(ByVal Source As Object, ByVal E As DataGridPageChangedEventArgs)
myDataGrid.CurrentPageIndex = E.NewPageIndex
RefreshGrid()
End Sub

Do you see what happened? The event argument that was passed to the procedure was of the type "DataGridPageChangedEventArgs" which just happens to have a parameter named "NewPageIndex". The procedure sets the "current page index" to the "new page index" and calls the "RefreshGrid" procedure to refresh the grid. Just for the sake of completeness, here is the syntax (from my application) for refreshing the grid.

Private Sub RefreshGrid()

Dim strState As String

- Lets assume we want to look at the state of Alabama. I took out a lot of irrelevant code here just to keep the example simple.

strState = "AL"

- I have a separate function for getting the database connection string from the web.config file. That syntax is not covered here.

Dim strConnect As String = GetConnectString()
Dim strSQL As String
strSQL = "Select Docket_ID as [ID], Docket_Number as [DOC NUMBER],"
strSQL = strSQL & " Docket_Title as [TITLE] from dbv_Docket WHERE"
strSQL = strSQL & " State_Code = '" & strState & "'"
strSQL = strSQL & " Order by Docket_Number"

- Note. You can't use paging if the data source does not implement the ICollection interface. The DataReader does not implement the interface, so we can't use it.

Dim Conn As New SqlConnection(strConnect)
Dim AdapterDockets As SqlDataAdapter
Dim DataSetDockets As DataSet
Conn.Open()
AdapterDockets = New SqlDataAdapter(strSQL, Conn)
DataSetDockets = New DataSet()
AdapterDockets.Fill(DataSetDockets)
myDataGrid.DataSource = DataSetDockets
myDataGrid.DataBind()
End Sub

Conclusion

I certainly didn't exhaust all the possibilities but I think this provides a reasonable overview. I am not, after all, expecting the Pulitzer Prize for Literature. I'll mention one thing of which you should be aware. Let's say your data source contains 100,000 records. You refresh the grid the first time and 100,000 records are returned and the grid moves to page 1. You click on the pager link and what happens? Yep! 100,000 records are returned (again) and the grid moves to page 2. You click on the pager link again and 100,000 records are returned and your grid moves to page 3. You get the idea. If you are working with very large data sources, the default paging idea might not be what you want to do. I'll discuss some alternatives in a future article.

About the Author:
Visit Roger McCook's Web site at http://www.mccooksoftware.com.