The DataGrid Web Control

The DataGrid Web control was designed to render data into an HTML table tag, as was shown in Listing 1.2 and Figure 1.1. That is, for each row in the DataGrid's DataSource, an HTML table row (tr) is added, and for each column in each row a table column cell is added (td).

The DataGrid declaration shown in line 29 of Listing 1.1 was the DataGrid in its simplest form: simply displaying all the rows and columns in the DataSource using the default formatting options. What Listing 1.1 does not show is the DataGrid's rich set of capabilities, which include the following:

• Custom formatting of the columns from the DataSource.

• Customizing the appearance of the DataGrid.

• Allowing the user to sort the results of the DataGrid.

• Providing pagination support, so that the user can page through the DataGrid's results.

• A means to edit the data within the DataGrid.

Many of the features listed here and more will be covered later in the book. In this section, the only feature we'll examine in any detail is the first one. We will also discuss some of the features of the DataGrid that are not present in the DataList or Repeater.

Specifying the Columns to Display

As you may have noted in Listing 1.1, the DataGrid will display all fields in the DataSource in the order they appear by default. However, there might be times when you only want to display a subset of the fields in the DataSource, or you want them to appear in a different left-to-right ordering. The AutoGenerateColumns property of the DataGrid class indicates whether all the DataSource's fields will be automatically added to the DataGrid; by default this property is set to True.

If you want to specify what fields should appear in the DataGrid Web control, you should first make sure that the AutoGenerateColumns property is set to False (as shown in Listing 1.4), and then add a Columns tag that explicitly lists the fields that you want to appear.

NOTE

If you forget to set the AutoGenerateColumns property to False, but still supply a Columns tag, all of the DataSource's fields will be displayed in the DataGrid, along with whatever fields you specify in the Columns tag.

You can use the BoundColumn control to explicitly add a column to the Columns tag. The vital property of the BoundColumn control is the DataField property, which specifies the column name in the DataSource that you want to display. If this is not quite clear, hopefully an example will help!

Listing 1.4 contains the same source code from Listing 1.1 the only change is in the DataGrid declaration. Rather than having the DataGrid automatically create its columns from the DataSource, we set the AutoGenerateColumns property to False, and then explicitly list the fields we'd like to have present in our DataGrid in the Columns section using BoundColumn controls.

Listing 1.4 You Can Specify the Columns that Should Appear in a DataGrid

  1: <%@ import Namespace="System.Data" %>   2: <%@ import Namespace="System.Data.SqlClient" %>   3: <script runat="server">   4:   5:     Sub Page_Load(sender as Object, e as EventArgs)   6:       '1. Create a connection    7:        Const strConnString as String = "server=localhost;uid=sa;pwd=; database=pubs"   8:        Dim objConn as New SqlConnection(strConnString)   9:  10:       '2. Create a command object for the query  11:       Const strSQL as String = "SELECT * FROM authors"  12:       Dim objCmd as New SqlCommand(strSQL, objConn)  13:  14:       '3. Create the DataAdapter  15:       Dim objDA as New SqlDataAdapter()  16:       objDA.SelectCommand = objCmd  17:  18:       '4. Populate the DataSet and close the connection  19:       Dim objDS as New DataSet()  20:       objDA.Fill(objDS)  21:       objConn.Close()  22:  23:       'Finally, specify the DataSource and call DataBind()  24:       dgAuthors.DataSource = objDS  25:       dgAuthors.DataBind()  26:     End Sub  27:  28: </script>  29:  30: <asp:datagrid  runat="server"  31:         AutoGenerateColumns="False">  32:   <Columns>  33:     <asp:BoundColumn DataField="au_fname" HeaderText="First " />  34:     <asp:BoundColumn DataField="au_lname" HeaderText="Last " />  35:     <asp:BoundColumn DataField="phone" HeaderText="Phone #" />  36:   </Columns>  37: </asp:datagrid> 

The output of the above ASP.NET page, when viewed through a browser, can be seen in Figure 1.2. Note that on line 31 we set the DataGrid's AutoGenerateColumns property to False; next, on lines 32 36 we specify the columns that should appear in the DataGrid using BoundColumn controls. Using the BoundColumn controls, the DataField property specifies the name of the column in the DataSource that should be displayed, while the HeaderText property indicates what text should appear in the column's heading. The BoundColumn controls contain a number of other properties to aid in specifying the stylistic properties for the particular column. We'll be examining these properties in detail in Chapter 3, "Customizing the HTML Output."

Figure 1.2. Only the specified columns appear in the DataGrid.

NOTE

If you omit the HeaderText property in the BoundColumn control, the name of the column au_fname, au_lname, and phone, in Listing 1.4 will be displayed instead.

The Columns section of the DataGrid Web control can contain more than just BoundColumns. As we'll see in Chapter 4, "Adding Buttons and Hyperlinks to the DataGrid Web Control," you can add ButtonColumn and HyperLinkColumn controls to associate a button or hyperlink with each row. The HyperLinkColumn control is useful for providing navigation related to each row: perhaps a link to a View More Details page on each row of a DataGrid that displays product information. The ButtonColumn control is useful for assigning some sort of action for a particular row. For example, you might use a DataGrid to display the items in a customer's shopping cart; a ButtonColumn could be used to provide a Remove Item from Cart button that would remove the specified item.

The Columns section can also contain an EditColumn control, which provides an Edit button for each row for times when you want to allow the user to edit the data within a DataGrid. We'll look at how to provide such functionality for the DataGrid in Chapter 9, "Editing the DataGrid Web Control."

Lastly, the Columns section can also include a TemplateColumn, which allows the developer to specify templates. Templates are a mix of HTML markup and content from the DataSource. Templates are used extensively with the DataList and Repeater controls, which we'll be examining shortly. Furthermore, in Chapter 3 we will look at using templates in the DataGrid in more detail.

DataGrid Features Not Found in the Other Data Web Controls

Next we'll turn to a brief examination of the DataList and Repeater Web controls, but before we do, let's take note of some of the more interesting features of the DataGrid that are not present in these other data Web controls. The two most prominent features present in the DataGrid that are missing in the other data Web controls are sorting and pagination support.

By enabling the DataGrid's sorting feature, the title of each column in the DataGrid Web control becomes a hyperlink. When the link for a column is clicked, the DataGrid's contents are ordered by that particular column.

The pagination features of the DataGrid control allow for only a portion of the rows in the DataSource to be displayed at a time, with navigation to allow the user to page through the results. For example, if the DataSource is comprised of, say, 500 rows, presenting all 500 rows to the end user on one Web page would make the information hard to read and comprehend. Rather, using the DataGrid's pagination support, you could display 15 rows at a time to the user. The user could then specify what page of data she'd like to view next. The sorting and paging capabilities of the DataGrid Web control are presented in detail in Chapters 7 and 8, respectively.

Now that we've looked at the DataGrid Web control, let's turn our attention next to the DataList.