ASP.NET DataList Control  Introduction:

The DataList control is, like the Repeater control, used to display a repeated list of items that are bound to the control. However, the DataList control adds a table around the data items by default. The DataList control may be bound to a database table, an XML file, or another list of items.

OR

The DataList control like the Repeater control is a template driven, light weight control, and acts as a container of repeated data items. The templates in this control are used to define the data that it will contain. It is flexible in the sense that you can easily customize the display of one or more records that are displayed in the control.

OR

The DataList Web server control displays data in a format that you can define using templates and styles. The DataList control is useful for data in any repeating structure, such as a table. The DataList control can display rows in different layouts, such as ordering them in columns or rows.

 

When the web page is in execution with the data bound to it using the Page_Load event, the data in the DataList control is rendered as DataListItem objects, that is, each item displayed is actually a DataListItem. Similar to the Repeater control, the DataList control supports Editing and Deleting features whereas Repeater does not support. The DataList control does not have Paging and Sorting functionalities built into it similar to Repeater control.

Also, DataList has RepeatDirection, RepeatColumns and RepeatLayout properties, which are unique for DataList control. These properties are useful when you need to create presentation with more than one record per row, like Image Gallery, Product Catalogue etc. For example, let say you are creating an image gallery and want to show 5 images per row. Repeater would require checking of record position and manipulating HTML. With DataList, just use RepeatDirection=”Horizontal” and RepeatColumns=”5″. RepeatLayout could be Table or Flow, depending of do you need HTML table structure in layout. These features are not possible using any other data controls.

The DataList Control includes a rich set of properties that we can use to format the HTML rendered by the control whereas Repeater Controls doesn’t not support this feature. If we want to associate Cascading Style Sheet rules with various elements of the DataList, then we can take advantage of any of the following properties:

CssClass: It enables us to associate a CSS class with the DataList.

 HeaderStyle: It enables us to format the header row of the DataList.

 FooterStyle: It enables us to format the footer row of the DataList.

 ItemStyle: It enables us to format each row displayed by the DataList.

AlternatingItemStyle: It enables us to format every other row of the DataList.

EditItemStyle: It enables us to format the DataList row selected for editing.

SelectedItemStyle: It enables us to format the selected row in the DataList.

SeparatorStyle: It enables us to format the row separator displayed by the DataList.

When formatting the DataList, we also need to work with the following properties:

GridLines: It enables us to add rules around the cells in the DataList. Possible values are None, Horizontal, Vertical, and Both.

ShowFooter: It enables us to show or hide the footer row.

ShowHeader: It enables us to show or hide the header row.

UseAccessibleHeader: It enables us to render HTML <th> tags instead of <td> tags for the cells in the header row.

Using the DataList Control:

To use this control, drag and drop the control in the design view of the web form onto a web form from the toolbox and corresponding markup will be generated automatically in the source view of a web form as following:

<asp:DataList ID=”DataList1″ runat=”server”></asp:DataList>

The Templates are as follows: 

HeaderTemplate   –  HeaderStyle

FooterTemplate   –  FooterStyle

ItemTemplate   –  ItemStyle

AlternatingItemTemplate  –  AlternatingItemStyle

EditItemTemplate   –  EditItemStyle

SelectedItemTemplate  –  SelectedItemStyle

SeparatorTemplate   –  SeperatorStyle

Events of DataList Controls:

ItemCreated: Occurs on the server when an item in the System.Web.UI.WebControls.DataList control is created.

ItemCommand: Occurs when any button is clicked in the System.Web.UI.WebControls.DataList control.

ItemDataBound: Occurs when an item is data bound to the System.Web.UI.WebControls.DataList control.

EditCommand: Occurs when the Edit button is clicked for an item in the System.Web.UI.WebControls.DataList control.

UpdateCommand: Occurs when the Update button is clicked for an item in the System.Web.UI.WebControls.DataList control.

DeleteCommand: Occurs when the Delete button is clicked for an item in the System.Web.UI.WebControls.DataList control.

CancelCommand: Occurs when the Cancel button is clicked for an item in the System.Web.UI.WebControls.DataList control.

SelectedIndexChanged: Occurs when a different item is selected in a data listing control between posts to the server.