asp.net.ph

Skip Navigation Links

Introduction to the DataList Control

Controls You Can Use on Web Forms   ASP.NET Data Controls   DataList Control


The DataList Web server control is a flexible, full-featured container control used for customizing the display of one or more records from a data source. In addition, the DataList can be configured to enable users to select, edit, or delete data in the control.

Like the FormView and the Repeater controls, the DataList does not specify pre-defined layouts for displaying and/or updating the data. Authors must provide the user interfaces by using templates provided for the control.

When the page runs, the DataList loops through the data source and renders the content for each record as a DataListItem object, the appearance of which is described in the template.

The following sections briefly introduce the main features of the DataList control.

Binding Data to the Control

NOTE: The DataList control must be bound to a data source; otherwise, the control will not render on the page.

The DataList control provides the following options for binding to data:

  • Data binding using the DataSourceID property, which allows binding the DataList control to a data source control. This is the recommended approach as it enables the DataList control to take advantage of the capabilities of the data source control, and provide built-in functionality for selecting and updating.
  • Data binding using the DataSource property, which allows binding to any data source that implements the ICollection or IEnumerable interface, including ADO.NET datasets and datareaders. This approach, though, requires coding for any additional functionality such as selecting and updating.

When binding data, the DataList displays one row for each record in the data source. You can, however, choose which fields in the data source to display in the list.

If you are using the DataList to allow users to edit the data, you can optionally set the DataKeyField property, to specify the primary key field in the data source that uniquely identifies each row in the list. This information simplifies data selection and update operations, and does not have to be part of the information displayed in the list.

For details about updating data using the DataList control, see Allowing Users to Edit Items in a DataList Control. For general information about data binding in server controls, see Data Binding in Web Forms.

Templates for Control Layout

As mentioned, the DataList does not have a built-in user interface. Using templates provided for the control, authors can define how the data associated with the control is to be presented. The following table lists the template types you can specify for the DataList.

Template type Description
AlternatingItemTemplate Defines the content to render for every other data row when the DataList control is in read-only display mode. The AlternatingItemTemplate is rendered for every other item in the DataList control, and is typically used to specify a different appearance, such as a different background color, for the alternating rows in the data source.
EditItemTemplate Defines the content for the data row when the DataList control is in edit mode. The EditItemTemplate is invoked for an item in the DataList when the EditItemIndex is set to the ordinal number of the corresponding row in the data source. This template typically contains input-type editing controls such as a TextBox, CheckBox, or DropDownList control.
FooterTemplate Defines the content for the footer row that is rendered at the bottom of the DataList control. This template usually contains any additional content you would like to display in the footer row. The FooterTemplate cannot be data bound.
HeaderTemplate Defines the content for the header row that is rendered at the top of the DataList control. This template usually contains any additional content you would like to display in the header row. The HeaderTemplate cannot be data bound.
ItemTemplate Defines the content to render for each data row when the DataList control is in read-only display mode.
SelectedItemTemplate Defines the content for the data row when the DataList control is in selected mode. The SelectedItemTemplate is invoked for an item in the DataList when the SelectedIndex is set to the ordinal number of the corresponding row in the data source. Typical uses are to visually highlight the selected row, and to render additional item details, by expanding the number of data source fields displayed.
SeparatorTemplate Defines the content to render between each data row. A typical use is to visually highlight the separation of items, for instance, by using an <hr> element. The SeparatorTemplate cannot be data bound.

At a minimum, the ItemTemplate must be defined. To support editing, an EditItemTemplate needs to be defined. Other templates are optional.

NOTE: The ItemTemplate must contain at least one databinding expression that binds a control to a field from the data source; otherwise the DataList has nothing to render.

For more information, see Web Server Controls Templates.

Styles

The DataList control supports additional customization of the user interface by using template styles. Each template supports its own style object whose properties can be set both at design time and at run time.

The following table lists the style properties you can specify for the DataList.

Style property Description
AlternatingItemStyle The style settings for every other data row when the DataList control is in read-only display mode.
EditItemStyle The style settings for the data row when the DataList control is in edit mode.
FooterStyle The style settings for the footer row ( if any ) that is rendered at the bottom of the DataList.
HeaderStyle The style settings for the header row ( if any ) that is rendered at the top of the DataList ( if any ).
ItemStyle The style settings for each data row when the DataList control is in read-only display mode.
SelectedItemStyle The style settings for the data row when the DataList control is in selected mode.
SeparatorStyle The style settings for the separator row ( if any ) that is rendered between each data row in the DataList.

For more information, see Web Forms Server Controls and CSS Styles.

Item Layout

The DataList control also supports additional customization of the user interface by using layout options. Authors can specify how the items are laid out with respect to one another.

The following table describes the layout options you can specify for the DataList.

Layout option Description
Flow layout In flow layout, list items are rendered inline, as in a word-processing document. Flow layout uses HTML <span> elements and is suitable for simple lists. Some browsers, though, do not support setting properties for <span> elements. For details, see Specifying List Layout in a DataList Control.
Table layout In table layout, the items are rendered into an HTML table, which provides for greater flexibility in presenting the data, as it allows you to set table cell properties such as gridlines and cell spacing. For details, see Specifying List Layout in a DataList Control.
Number of columns By default, the items in a DataList control are displayed in a single vertical column. You can, however, specify how many columns the list will have, which further provides for greater flexibility in presenting the data, as well as for controlling the rendered width of the Web page, usually to avoid horizontal scrolling.
Vertical and horizontal layout When the number of columns is specified, you can further specify whether the items are ordered vertically ( like newspaper columns ) or horizontally ( like days in a calendar ). For details, see Specifying List Direction in a DataList Control

See Also

Adding DataList Controls to a Web Forms Page



© 2025 Reynald Nuñez and asp.net.ph. All rights reserved.

If you have any question, comment or suggestion
about this site, please send us a note