Introduction to the DataList Web Server Control
The DataList Web server control displays data in a format that you can define using templates and styles. The DataList control is useful for displaying rows of data. Optionally, you can configure the DataList control to allow users to edit or delete information. You can also customize the control to support other functionality such as selecting rows.
Note To precisely control the HTML used to render the list, use the Repeater Web server control. If you want to include paging and sorting automatically, use the DataGrid Web server control. For more information, see Controls for Displaying Lists On Web Pages.
The DataList control displays rows of data as items in the list. You use templates to define the layout of the items by including HTML text and controls. For example, you might use a Label Web server control in an item to display a field from the data source.
The following sections introduce you to the features of the DataList control.
Binding Data to the Control
The DataList control must be bound to a data source. Typical data sources for the DataList are datasets and data readers (OleDbDataReader or SqlDataReader objects). You can use data sources that you can add to your page from the Toolbox, such as the DataSet or DataView class. You can also bind to data sources created in code, such as a data reader or an array. The control can use as a data source any class that supports the IEnumerable interface.
When data binding, you specify a data source for the DataList control as a whole. When you add other controls to this control — for example, labels or text boxes in list items — you in turn bind them to the container, namely the DataList control.
For more information, see Data Access in Web Forms Pages.
Templates for Control Layout
In the DataList control, you define the layout of your information using templates.
Note For an overview of using templates, see Web Server Controls Templates.
The DataList control supports the following templates:
|ItemTemplate||The HTML elements and controls to render once for each row in the data source.|
|AlternatingItemTemplate||Like the ItemTemplate element, but rendered for every other row in the DataList control. If you use this template, you typically create a different look for it, such as a different background color than that of the ItemTemplate.|
|SelectedItemTemplate||The elements to render when the user selects an item in the DataList control. Typical uses are to visually mark the row using a background or font color. You can also expand the item by displaying additional fields from the data source.|
|EditItemTemplate||The layout of an item when it is in edit mode. This template typically contains editing controls, such as TextBox controls.|
|HeaderTemplate and FooterTemplate||The text and controls to render at the beginning and end of the list.|
|SeparatorTemplate||The elements to render between each item. A typical example might be a line (using an <HR> element).|
To specify the appearance of items in a template, you can set the template's style. For example, you might specify that:
- Items are rendered with black text on a white background
- Alternating items are rendered with black text on a light gray background
- The selected item is rendered with bold black text on a yellow background
- Items being edited are rendered with black text on a light blue background
Each template supports its own style object whose properties you can set both at design time and at run time.
For an overview, see ASP.NET Server Controls and CSS Styles.
Not only can you use templates to specify the layout of controls and text within individual items, but you can specify how the items are laid out with respect to one another. The DataList control offers these options:
|Flow versus table||In flow layout, list items are rendered inline, in the fashion of a word-processing document.
In table layout, the items are rendered into an HTML table, which gives you more facilities for specifying the look of items, because it allows you to set table cell properties such as gridlines. For details see Specifying Flow or Table Format in a DataList Web Server Control.
|Vertical versus horizontal ordering||By default, items in a DataList control are displayed in a single vertical column. However, you can specify that the control contain more than one column. If so, you can further specify whether the items are ordered vertically (like newspaper columns) or horizontally (like days in a calendar). For details see Specifying Horizontal or Vertical Layout in a DataList Web Server Control.|
|Number of columns||Regardless of whether items in a DataList control are ordered vertically or horizontally, you can specify how many columns the list will have. This permits you to control the rendered width of the Web page, usually so that horizontal scrolling may be avoided.|
The DataList control supports several events. One of them, the ItemCreated event, gives you a way to customize the item-creation process at run-time. The ItemDataBound event also gives you the ability to customize the DataList control, but after the data is available for inspection. For example, if you were using the DataList control to display a to-do list, you could display overdue items in red text, completed items in black text, and other tasks in green text. Either event may be used to override formatting from the template definition.
The remaining events are raised in response to button clicks in list items. They are designed to help you respond to the most commonly used functionality for the DataList control. Four events of this type are supported:
When a user clicks a button in an item, the event bubbles to the button's container — the DataList control. The exact event that the button raises depends on the CommandName property of the button that was clicked. For example, if the CommandName property of a button is edit, the button causes an EditCommand event to be raised. If the CommandName property is delete, the button causes a DeleteCommand event to be raised, and so on.
The DataList control also supports the ItemCommand event that is raised when a user clicks a button that doesn't have a predefined command such as edit or delete. You can use this event for custom functionality by setting a button's CommandName property to a value you need and then testing for it in the ItemCommand event handler. (For example, you could use this approach when selecting an item, as documented in Allowing Users to Select Items in a DataList Web Server Control.)
Editing and Selecting Items
You can allow users to edit individual items in the control. The general strategy is to create an EditItemTemplate that provides the appropriate layout and controls for editing. You must also provide a way for users to indicate that they want to edit the item. The most common way is to include a button in the item template (and AlternatingItemTemplate, if you are using that) and set the button's CommandName property to edit. Then when the button is clicked, the DataList control automatically raises the EditCommand event. In the event handler for that event, you set the item to edit mode, which displays the EditItemTemplate.
The EditItemTemplate usually includes buttons to allow the user to save the changes or discard them (for example, Update and Cancel buttons). These buttons work similarly to the Edit button — they send a predefined command message (update or cancel) to the DataList control, which raises an UpdateCommand or CancelCommand event that you can respond to appropriately. For a customer tracking application, the templates might appear as in the following figure.
The process for selecting an item is similar, using the SelectedIndexChanged event. Your add a button to the Item template and sets its CommandName property to select. You then write an event handler for the SelectedIndexChanged event. The SelectedIndexChanged event is raised when the user clicks the Select button. For details see Allowing Users to Select Items in a DataList Web Server Control.
The DataList in Edit Template Mode
Adding DataList Controls to a Web Forms Page | Specifying Flow or Table Format in a DataList Web Server Control | Specifying Horizontal or Vertical Layout in a DataList Web Server Control | Allowing Users to Select Items in a DataList Web Server Control | Allowing Users to Edit Items in a DataList Web Server Control | Allowing Users to Delete Items in a DataList Web Server Control