Understanding the Differences Among the DataGrid, DataList, and Repeater, Part 2
By Scott Mitchell
In Part 1 we looked at the similarities between the three data Web controls. In this part, we'll examine their differences!
A Brief Overview of the DataGrid Web Control
The DataGrid Web control was designed to display data in an HTML
<table>. Each
row in the DataGrid's DataSource is displayed as a row in the HTML <table>.
The DataGrid has an AutoGenerateColumns property, which can be set to either True or False.
If AutoGenerateColumns is set to True (the default), each field in the DataSource is
displayed as a column in the resulting HTML <table>. If, however, AutoGenerateColumns
is set to False, then the developer must explicitly specify what columns should appear.
One downside of a DataGrid is its rather "blocky" display. That is, the DataGrid displays
each DataSource record as a row in an HTML <table>, and each field
as a column in said table. While the DataGrid allows for the developer to customize the output for
a particular column through the <asp:TemplateColumn>, it still is restrictive
in that each DataSource record occupies precisely one HTML <table>
row. (For an example of customizing a DataGrid's column using templates, see
Combining
Two DataSource Fields Into One DataGrid Column.)
Despite its limitations on specifying the display of the DataGrid's data, the DataGrid is the most commonly used data Web control due to its impressive feature list. For example, with minimal code and effort, the DataGrid can provide sorting, paging, and in-place editing of its data. (For more on the DataGrid Web control, as well as thorough coverage of its features, be sure to read An Extensive Examination of the DataGrid Web Control.)
A Brief Overview of the DataList Web Control
The DataList Web control is useful for displaying data that can be highly customized in its layout. By default, the DataList displays its data in an HTML
<table>. However, unlike
the DataGrid, with the DataList you can specify via the RepeatColumns how many
DataSource records should appear per HTML <table> row. For example,
the following code and live demo illustrates
having five DataSource records displayed per HTML <table> row.
|
As the code example above shows, DataLists are comprised of a number of templates. Templates
can contain a mix of HTML syntax and databinding expressions, as shown in the above ItemTemplate.
Databinding expressions are ones delimited by <%# and %>, and contain
code that's executed when the DataListItem's DataBind() method is called. The ItemTemplate
specifies the template used for each record in the DataSource. The DataList contains other
templates, which are listed below:
- AlternatingItemTemplate - if specified, each alternating item in
DataSourceuses this template instead of the ItemTemplate. - EditItemTemplate - the template used when a DataList row is in "edit mode".
- HeaderTemplate - the template for the DataList's header item. Precisely one header item
is created for the DataList item if the DataList's
ShowHeaderproperty is set to True. - FooterTemplate - the template for the DataList's footer item. Precisely one footer item
is created for the DataList item if the DataList's
ShowFooterproperty is set to True. - SeparatorTemplate - this template, if specified, is applied after each DataListItem has been added.
| The DataGrid's TemplateColumn |
|---|
| The DataGrid can consist of TemplateColumns, which allow for more flexible formatting of a particular DataGrid column. However, the DataGrid's TemplateColumn only supports a subset of the templates that the DataList supports. Namely, the DataGrid's TemplateColumn contains support for the EditItemTemplate, HeaderTemplate, FooterTemplate, and ItemTemplate only. |
The DataList is capable of performing sorting, paging, and editing of its data, but to do so requires quite a bit more programming than to accomplish these tasks with the DataGrid. Therefore, if you know you will be needing these functionalities, it is likely best to proceed with the DataGrid. If, however, you will not need these functionalities, but do necessarily need the extra control over the formatting, consider a DataList.
A Brief Overview of the Repeater Control
The Repeater control, unlike the DataGrid and DataList, is not derived from the
WebControl
class, and therefore does not have the stylistic properties that are common to all Web controls.
(These stylistic properties that are common to all Web controls include Font, ForeColor,
BackColor, BorderStyle, and so on.)
The Repeater, like the DataList, only supports templates; however, the Repeater has only a subset of the DataList's template options. Specifically, the following templates can be used with the Repeater:
- AlternatingItemTemplate,
- ItemTemplate,
- HeaderTemplate,
- FooterTemplate, and
- SeparatorTemplate
The Repeater control provides the maximum amount of flexibility over the HTML produced. Whereas the
DataGrid wraps the DataSource contents in an HTML <table>, and the
DataList wraps the contents in either an HTML <table> or <span>
tags (depending on the DataList's RepeatLayout property), the Repeater adds absolutely
no HTML content other than what you explicitly specify in the templates.
Therefore, the Repeater is a good data Web control choice if you want to display data in, say, an
unordered list. As the following code and live demo show,
displaying database data in an unordered list using a Repeater is relatively straightforward. All you
have to do is add the <ul> tag to the HeaderTemplate, the </ul>
tag to the FooterTemplate, and an <li> tag along with the DataSource
field you want to display to the ItemTemplate:
|
The Repeater is a good choice if you need to display your data in a format different than an
HTML <table>. Unfortunately, the Repeater does not provide any built-in means
for editing, sorting, or paging of data. However, these mechanisms could be added programmatically,
but would result in a lot of code and effort.
Conclusion
This article examined the similarities and differences of the three data Web controls: the DataGrid, DataList, and Repeater. The main similarities between these three controls is in how they iterate through their
DataSource, building up a collection of DataWebControlNameItems. Furthermore,
the three Web controls all share three events: ItemCreated, ItemDataBound, and
ItemCommand.
Each of the data Web controls has its own strengths and weaknesses. The DataGrid, for example, is
great for quickly and easily displaying database data in an HTML <table>, and allows
for advanced features such as paging, sorting, and in-place editing to be added with little to no programming.
However, the DataGrid is quite limited in the general format with which the data is presented.
The DataList allows for more freedom. For example, in an earlier live demo we saw that using the
DataList's RepeatColumns property, multiple DataSource records could be displayed in
a single HTML <table> row. Additionally, the DataList's content is specified via templates,
which allows for a high degree of customization.
The Repeater allows for the utmost flexibility in its output, since the only HTML rendered from a Repeater is the HTML generated in its templates. That is, no additional HTML output is generated, as is the case with both the DataGrid and DataList. The Repeater, however, does not have any built-in support for sorting, paging, or editing of its data.
For a much more thorough and in-depth examination of the similarities and differences of the data Web controls, be sure to pick up a copy of my book, ASP.NET Data Web Controls Kick Start.
Happy Programming!
