To read the article online, visit http://www.4GuysFromRolla.com/articles/052103-1.2.aspx

Understanding the Differences Among the DataGrid, DataList, and Repeater, Part 2

By Scott Mitchell


  • Read Part 1

  • 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.

    <asp:DataList runat="server" id="dlPopularFAQs" 
                    ...
                    RepeatColumns="5" >
       <ItemTemplate>
         <b>Question:</b><br />
         <%# DataBinder.Eval(Container.DataItem, "Description") %>
         <p>
         <b>Views:</b><br />
         <%# DataBinder.Eval(Container.DataItem, "ViewCount", "{0:#,###}") %>
       </ItemTemplate>
    </asp:DataList>
    
    [View a Live Demo!]

    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 DataSource uses 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 ShowHeader property 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 ShowFooter property 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:

    <asp:Repeater runat="server" id="rptULforFAQs">
       <HeaderTemplate>
         <ul>
       </HeaderTemplate>
       <ItemTemplate>
         <li><%# DataBinder.Eval(Container.DataItem, "Description")%></li>
       </ItemTemplate>
       <FooterTemplate>
         </ul>
       </FooterTemplate>
    </asp:Repeater>
    
    [View a Live Demo!]

    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!

  • By Scott Mitchell

  • Article Information
    Article Title: ASP.NET.Understanding the Differences Among the DataGrid, DataList, and Repeater, Part 2
    Article Author: Scott Mitchell
    Published Date: May 21, 2003
    Article URL: http://www.4GuysFromRolla.com/articles/052103-1.2.aspx


    Copyright 2017 QuinStreet Inc. All Rights Reserved.
    Legal Notices, Licensing, Permissions, Privacy Policy.
    Advertise | Newsletters | E-mail Offers