Understanding the Differences Among the DataGrid, DataList, and Repeater

By Scott Mitchell

---

Introduction

One of the many benefits of ASP.NET over its predecessor, ASP, is ASP.NET's data Web controls. The data Web controls are designed to easily display data. For example, the DataGrid Web control is ideal for displaying data in an HTML <table>. (For more information on the DataGrid Web control be sure to read An Extensive Examination of the DataGrid Web Control.) In addition to the DataGrid Web control, there are two additional data Web controls. All in total, the three ASP.NET data Web controls are:

1. The DataGrid,
2. The DataList, and
3. The Repeater

These three controls share much in common, such as the programmatic syntax used for binding data to the Web control, as well as a number of common properties and events. Despite their similarities, though, each of these Web controls has their individual advantages and disadvantages. In designing data-driven Web applications, ASP.NET developers often find themselves wondering which of these three controls is the "best" one.

The answer to that question depends on what it is you are needing to accomplish. In this article we'll examine the merits and demerits of each of these three data Web controls, and look at situations where certain controls have benefits over the others. Additionally, we'll examine not only the different advantages and disadvantages, but what things these three controls have in common.

Looking for a More Detailed Examination of the Data Web Controls' Similarities and Differences?
If you are looking for a much more detailed look at the similarities and differences among the three data Web controls, consider picking up a copy of my book, ASP.NET Data Web Controls Kick Start. Specifically, Chapter 1 presents a thorough comparison and contrasting of these data Web controls. (For more information about ASP.NET Data Web Controls Kick Start, check out DataWebControls.com.)

Examining the Similarities Between the Data Web Controls

The main similarity between the DataGrid, DataList, and Repeater Web controls is that all three have a DataSource property and a DataBind() method. In order to bind data to one of these data Web controls, the same technique is used:

1. Assign the data to be displayed to the data Web control's DataSource property, and
2. Call the data Web control's DataBind() method.

Another similarity is that each of the data Web controls is composed of a given number of DataWebControlNameItems. That is, a DataGrid is composed of a number of DataGridItems; the DataList of DataListItems; and the Repeater of RepeaterItems. When the data Web control's DataBind() method is called, it iterates through the contents of the DataSource. For each record in the DataSource, a new DataWebControlNameItem instance is created and appended to the data Web control. After the DataWebControlNameItem instance has been created, its DataItem property is assigned the value of the current DataSource record and the DataWebControlNameItem's DataBind() method is called, which binds the columns of the DataSource record to the DataWebControlNameItem. (The DataGridItem, DataListItem, and RepeaterItem differ in a number of ways, which we'll discuss later in this article.)

In addition to these similarities, the data Web controls each also have the following three events:

1. ItemCreated,
2. ItemDataBound, and
3. ItemCommand

The ItemCreated event fires once for every DataWebControlNameItem added to the data Web control. It fires before the DataWebControlNameItem's DataItem property is assigned. The ItemDataBound event also fires once for every DataWebControlNameItem added to the data Web control, but this event fires after the DataWebControlNameItem's DataItem property is assigned. Finally, the ItemCommand event fires whenever the Command event for a Button or LinkButton within the data Web control fires.

Demystifying these Similarities With an Example

If you are thoroughly confused right about now, I don't blame you! The process a data Web control undergoes when being bound to data can be a bit perplexing at first. However, it is oftentimes much easier to comprehend these complexities by looking at an example. Consider the case where we have a DataGrid that contains two BoundColumns. Such a DataGrid declaration might look like:

<asp:DataGrid runat="server" id="myDataGrid" AutoGenerateColumns="False"> <Columns> <asp:BoundColumn DataField="Field1" /> <asp:BoundColumn DataField="Field2" /> </Columns> </asp:DataGrid>

Now, imagine that we are binding a DataSet to this DataGrid in the Page_Load event handler. To accomplish this, we might use the following code:

Sub Page_Load(sender as Object, e as EventArgs) Dim myConnection as New SqlConnection(connString) Const strSQL as String = "SELECT Field1, Field2 FROM TableName" Dim resultsDataSet as New DataSet() Dim myDataAdapter as SqlDataAdapter = New SqlDataAdapter(strSQL, myConnection) myDataAdapter.Fill(resultsDataSet) myDataGrid.DataSource = resultsDataSet myDataGrid.DataBind() End Sub

What happens when the DataGrid's DataBind() method is called? As we discussed earlier, the DataGrid's DataBind() method enumerates the records of the DataSet assigned to its DataSource property (namely, resultsDataSet). Realize that when iterating through the DataSet, in actuality you are iterating through the Rows collection of the DataSet's default DataTable. The Rows collection is comprised of a number of DataRow instances, one for each record returned by the specified SQL query.

Now, for each DataRow, first, a new DataGridItem is created. Then, the DataGrid's ItemCreated event fires. Next, the DataRow is assigned to the DataGridItem's DataItem property. Following this, the DataGrid's ItemDataBound event fires. This process is repeated for all of the DataRows.

This databinding process is common among the three data Web controls, the only difference being that with a DataList or Repeater a DataListItem or RepeaterItem is created in place of a DataGridItem.

A Real-World Use for the ItemDataBound Event

As earlier mentioned, each of the data Web controls fires its ItemDataBound event after the DataWebControlNameItem has been created and its DataItem property assigned. Oftentimes, you might want to conditionally adjust the formatting of a data Web control "row" based on its value. For example, in a DataGrid showing product information, you might want to highlight rows that have products that are on sale. To accomplish this, you can apply the formatting programmatically in the ItemDataBound event handler for rows that meet the desired criteria. For more on this topic, be sure to check out Conditionally Formatting a DataGrid Column's Value.

Now that we have examined the similarities between the DataGrid, DataList, and Repeater, let's turn our attention to their differences. We'll examine what makes each of these controls unique in Part 2.

Read Part 2!