The Repeater Control

The DataGrid Control

The DataGrid control renders a multi-column, fully templated grid and is by far the most versatile of all data bound controls. The user interface it provides closely resembles a Microsoft Excel worksheet. Despite its rather advanced programming interface and full set of attributes, DataGrid simply generates an HTML table with interspersed links to provide interactive functionality such as sorting and pagination commands.

With the DataGrid control, you can create simple data bound columns that show data retrieved from a data source, template columns that let you design the layout of cell contents, and last but not least, command-based columns that allow you to add specific functionality to a grid. In the next chapters, I ll delve more deeply into the implementation and the customizable features of the DataGrid control. But I think a discussion of the features that differentiate DataGrid from DataList is useful here.

The DataGrid control uses templates extensively but differently from the DataList and Repeater controls. DataGrid renders tables of data organized in columns, so the templates don t apply to the control as a whole but rather to specific columns. DataList and Repeater work on a per-item basis and make you responsible for controlling the final layout of the data. DataGrid has just one possible layout a sequence of columns and supports the same events as the DataList control plus two more: PageIndexChanged and SortCommand.

Now let s take a look at the DataGrid control in action. As you ve learned, the DataGrid control works by displaying columns of data. In most cases, you need to specify which columns you want and how you want them displayed, but when the data to be rendered is uncomplicated, you can leave the control free to automatically generate the columns based on the structure of the data source. When you leave the control in charge, however, you cannot control the heading of each column, which defaults to the column name. The following code arranges a DataGrid control that uses alternating rows and automatically generates the columns. The results are shown in Figure 1-7. The full source code for the DataGrid.aspx application is available on the companion CD.

<asp:DataGrid runat="server" AutoGenerateColumns="true" CellPadding="2" CellSpacing="2" GridLines="none" BorderStyle="solid" BorderColor="black" BorderWidth="1" font-size="x-small" font-names="verdana"> <AlternatingItemStyle BackColor="palegoldenrod" /> <ItemStyle BackColor="beige" /> <HeaderStyle ForeColor="white" BackColor="brown" Font-Bold="true" /> </asp:DataGrid>

Notice that you can use the style properties to declare CSS styles.

Figure 1-7

The columns displayed in this figure are created using the DataGrid control.

The next code example illustrates how to fill the grid and refresh the user interface.

void OnLoadData(Object sender, EventArgs e) { SqlConnection conn = new SqlConnection(txtConn.Text); SqlDataAdapter da = new SqlDataAdapter(txtCommand.Text, conn); DataSet ds = new DataSet(); da.Fill(ds, "MyTable"); grid.DataSource = ds.Tables["MyTable"]; grid.DataBind(); }