Displaying Data with the GridView Control
| When we're displaying data on a web page, more often than not we want to display all records from a particular query. The query might be a static query, such as SELECT * FROM [Books], or it may be a more dynamic one whose filter expressions are based on the visitor's input. Regardless of the type of query, if you want to display all of the results at once, then consider using the GridView. In addition to showing each of the records retrieved by the data source control, the GridView, by default, shows an additional header row, which lists the names of the displayed fields. By default, the GridView contains a field for each of the data source control's columns, although this can be customized as we'll see shortly. In this hour we already examined adding a GridView to an ASP.NET page and associating it with a data source control. There are but two steps:
The result of these two simple steps is an ASP.NET page that displays the retrieved data in a grid. A Look at the GridView's Declarative MarkupWhen adding the GridView control to our ASP.NET page, we did everything through the Design view. Like any other Web control, the GridView can also be configured declaratively, through the Source view. However, the tools available through the Design view can save you a great deal of typing. Figure 15.2 showed the Design view immediately after adding a GridView to the page. The declarative markup added to the Source view is very concise: <asp:GridView runat="server"> </asp:GridView> However, after you set the GridView's data source through the smart tag, the declarative markup explodes. Listing 15.1 contains the declarative markup after the GridView has been bound to SqlDataSource1. Figure 15.3 shows what the GridView looks like in the Design view after making this setting. Listing 15.1. The GridView's Markup, After It's Been Bound to a Data Source Control
The <asp:GridView> tag (lines 1 and 2) has three new properties:
Starting on line 3 is the <Columns> element, which defines the fields of the GridView (lines 4 through 11). Each <asp:BoundField> element represents a field rendered in the GridView. As you can see from Listing 15.1, there are seven fields in the GridView, one for each of the columns returned by the data source control. Each <asp:BoundField> element contains an assortment of properties, specifying the name of the database column whose data is to be displayed (DataField) and the text shown in the column's header (HeaderText), among others. This tag can also contain column-specific formatting information, as we'll see shortly. The purpose of Listing 15.1 is to highlight the benefit of the Design view in Visual Web Developer. Without the Design view, we would have to enter in the GridView's declarative markup by hand. Thanks to the Design view and the GridView's smart tag, this declarative markup was automatically generated for us the moment we specified the GridView's data source control.
Examining the GridView's Rendered MarkupWhen an ASP.NET page is requested through a browser, the page is rendered into HTML. This requires that the Web controls on the page be converted from the declarative markup to HTML. The GridView is translated into an HTML <table> with a table row (<tr>) for each row in the data source control and a table cell (<td>) for each column and for each row. The header row's columns are rendered as table headers (<th>). Listing 15.2 shows the HTML generated by the GridView. When the browser receives this HTML, it will display the output shown in Figure 15.4. Listing 15.2. A GridView Is Rendered as an HTML <table>
Customizing the Appearance of the GridViewThe GridView shown in Figure 15.4 is rather unattractive. It lacks any color; uses the default system font; displays, perhaps, fields that don't concern the user (such as BookID); and lacks any sort of formatting for currency and date values. Also, all values are left-aligned and look alike. Perhaps we want the PageCount right-aligned and want to emphasize the title of the book by displaying it in italics. Finally, the field names displayed in the grid's header are the precise names of the database columnsBookID, YearPublished, LastReadOn, PageCount, and so on. Ideally, we would want these to be more readable names, like ID, Published, Last Read, and Pages. All of these customizations can be easily accomplished with the GridView. The GridView allows customization of its appearance on a number of levels:
These various levels of settings can be set through the Auto Format dialog box, the Fields dialog box, or the Properties window. Let's examine how to tailor the GridView's appearance at each of the levels using each of the tools available. Formatting from the Properties WindowGridView-level and row-level formatting can be accomplished directly through the Properties window. Take a moment to click on the GridView in the Design view, which will load the GridView's properties in the Properties window. In the Appearances section (see Figure 15.5), you can set a number of GridView-level properties. Figure 15.5. Customize the formatting of the entire GridView using the Appearance properties. Table 15.1 lists these Appearance properties along with a brief description. Realize that these properties affect the entire GridView's formatting. That is, if you set, say, the BackColor property to Green, all of the rows and all of the fields in the GridView will have a Green background color.
Take a moment to try out some of these Appearance properties. Figure 15.5 shows Visual Web Developer after I set a number of properties. While making changes to these properties, notice how the GridView's appearance in the Design view is automatically updated to reflect the new formatting choices. Furthermore, note how the Appearance property settings affect the entire GridView. The Properties window also includes properties that you can set to specify the formatting at the row-level. In the Styles section of the Properties window, you'll find a suite of properties that apply to various classes of rows. Table 15.2 lists these row-level style properties.
Each of these properties has a number of subproperties: BackColor, ForeColor, Font, CssClass, HorizontalAlign, and the like. Take a moment to set some of the subproperties for RowStyle, AlternatingRowStyle, and HeaderStyle. Figure 15.6 shows Visual Web Developer after I customized my GridView's formatting a bit. Figure 15.6. The Styles properties allow you to customize various classes of rows. Formatting the GridView's FieldsAt this point we've seen how to perform GridView-level formatting as well as row-level formatting. The only level we've yet to examine is field-level. You cannot edit the fields of the GridView through the Properties window; instead, go to the GridView's smart tag and click the Edit Columns link. This will display the Fields dialog box (see Figure 15.7). Figure 15.7. Customize the columns of the GridView through the Fields dialog box. The Fields dialog box lists the fields in the GridView in the bottom-left corner. Selecting a field from this list will load that field's properties in the list on the right. At the upper-left portion of the Fields dialog box is the list of types of fields that can be added to a GridView. Currently, all of the fields used by the GridView are BoundFields. A BoundField simply displays the value from a particular column in the corresponding data source control. Other types of fields enable other functionality. For example, the HyperLinkField displays a hyperlink in each row; the ButtonField displays a button in each row. We'll examine some of these additional field types in more detail in Hour 16. In addition to listing all of the fields currently in the GridView, the Selected Fields list allows you to remove fields and reorder the fields in the GridView. For example, let's remove the BookID field from the GridView because end users don't need this information. To remove this field from the GridView, click on the BookID field from the list in the bottom-left corner and then click the delete icon (the red X). Next, let's have the PageCount field displayed after the Author field. To accomplish this, click on the PageCount field and then click the up-arrow icon until PageCount is the third field in the list. To customize a particular field, first click on the field in the list. This will load its properties in the right side of the dialog box. Table 15.3 lists some of the more germane field-level properties.
Change the HeaderText properties of the PageCount, YearPublished, and LastReadOn fields to Pages, Published and Last Read, respectively. Next, go to the Title field's ItemStyle property and expand it, locating the Font property. Expand the Font property and set the Italic subproperty to true. Let's also configure the Price and LastReadOn fields to format their values more appropriately. To format a field, we need to set two properties: HtmlEncode must be set to False, and DataFormatString should be set to the format string of the form {0:format specifier}. The format specifier indicates how the data is to be formatted. A number of built-in format specifiers are designed to format specific data types. For example, c formats a number into a currency; d formats a date/time value into just a date. You can find a complete list of format specifiers by searching the Visual Web Developer help for "formatting." To format the Price field as a currency and the LastReadOn field as just a date, set the HtmlEncode property to False for both fields and then set the DataFormatString properties of the Price field to {0:c} and the LastReadOn field to {0:d}. Click OK to close the Fields dialog box. When you return to the Design view, the GridView should be updated to show the new changes: The BookID field has been removed, the Pages field now comes after the Author field, the Title field is displayed in italics, and so on. Figure 15.8 shows Internet Explorer when viewing the GridView after making these field-level formatting settings. Figure 15.8. The fields of the GridView have been customized. Formatting with the Auto Format Dialog BoxAs you may have gathered from the formatting I've applied to the GridView, its rows, and its fields, I am hardly one to be trusted with choosing the GridView's formatting. I have about as much artistic skill as a vegetable. We can be thankful that the GridView includes an Auto Format option. From the smart tag, click the Auto Format link, which shows the Auto Format dialog box (see Figure 15.9). From this dialog box, you can pick one of a number of predefined styles. Figure 15.9. The Mocha style looks so much nicer than anything I could craft. Selecting one of the Auto Format styles will cause a number of Appearance and Styles properties to be automatically set in order to display the chosen format. If you are an artistic individual, you might rather just define these formatting settings yourself. However, if you're like me, the Auto Format feature will quickly become your best friend! |
DataKeyNames="BookID" 2: DataSource> 3: <Columns> 4: <asp:BoundField DataField="BookID" HeaderText="BookID" InsertVisible="False" 
EAN: 2147483647
Pages: 233