BoundColumns

In the previous examples, the DataGrid has been bound to a data source and the columns have been created dynamically based on the columns in the DataTable. BoundColumns can be used to create a custom column layout for the DataGrid. Each BoundColumn can define the column heading text and the field in the table to sort on. Like all controls in ASP.NET, BoundColumns includes basic properties such as Visible, among others. In Chapter 7, “Working with ASP.NET Server Controls Templates,” you'll learn about other properties of BoundColumns. This chapter covers only the basic properties.

BoundColumns are encapsulated inside a property declaration. The DataGrid property is named Columns. Each BoundColumn renders a table column populated with the data from the data source specified by a DataField property. Listing 6.12 shows the DataGrid code to use BoundColumns with the programmatic code from Listing 6.11.

Listing 6.12. Using BoundColumns with the DataGrid

[Web Form VB & C#]

16: <asp:DataGrid runat="server" id="myDataGrid"
17:   Width="740"
18:   Cellpadding="4"
19:   Cellspacing="0"
20:   Gridlines="Horizontal"
21:   HorizontalAlign="Center"
22:   HeaderStyle-CssClass="tableHeader"
23:   ItemStyle-CssClass="tableItem"
24:   AlternatingItemStyle-CssClass="alternatingItem"
25:   AllowPaging="True"
26:   OnPageIndexChanged="PageIndexChanged_OnClick"
27:   PageSize="10"
28:   PagerStyle-Mode="NumericPages"
29:   PagerStyle-HorizontalAlign="Right"
30:   PagerStyle-CssClass="pageLinks"
31:   AllowSorting="True"
32:   OnSortCommand="SortCommand_OnClick"
33:   AutoGenerateColumns="False"
34:  >
35:  <Columns>
36:   <asp:BoundColumn DataField="CompanyName"
37     HeaderText="Company Name" SortExpression="CompanyName" />
38:   <asp:BoundColumn DataField="ContactName"
39:    HeaderText="Contact Name" SortExpression="ContactName" />
40:   <asp:BoundColumn DataField="ContactTitle"
41:    HeaderText="Contact Title" SortExpression="ContactTitle" />
42:   <asp:BoundColumn DataField="Phone" HeaderText="Phone" />
43:   <asp:BoundColumn DataField="Fax" HeaderText="Fax" />
44:  </Columns>
45:  </asp:DataGrid>

In Listing 6.12, you modify the DataGrid properties to use BoundColumns. The benefit of using BoundColumns is that you can specify the column heading text (HeaderText) and the name of the field to sort on (SortExpression). In Listing 6.12, you add spaces to column names that are two words (such as Company Name, Contact Name, and Contact Title), and disable sorting on the Phone and Fax columns by not adding a SortExpression value to those columns.

On line 33, you add the AutoGenerateColumns property to the DataGrid and set it to False. This tells the .NET Framework that you'll specify how the columns are generated. If AutoGenerateColumns is set to True, the BoundColumns you specify will be rendered, followed by all the columns in the data source. True is the default value.

Each BoundColumn specifies a DataField property (lines 37, 39, 41, 42, and 43). This is the name of the field in the data source that the BoundColumn will display when data-bound. Additionally, you specify the HeaderText property and a SortExpression property. For the Phone (line 42) and Fax (line 43) columns, no SortExpression is specified. The .NET Framework will disable sorting on a column when BoundColumns are used and no SortExpression is specified. Figure 6.11 shows the rendered page from Listing 6.12.