7 min read

In this article by Joydip Kanjilal, we will discuss the ASP.NET DataList control which can be used to display a list of repeated data items. We will learn about the following:

  • Using the DataList control
  • Binding images to a DataList control dynamically
  • Displaying data using the DataList control
  • Selecting, editing and deleting data using this control
  • Handling the DataList control events

The ASP.NET DataList Control

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. You have a property in the DataList control called RepeatDirection that can be used to customize the layout of the control.

The RepeatDirection property can accept one of two values, that is, Vertical or Horizontal. The RepeatDirection is Vertical by default. However, if you change it to Horizontal, rather than displaying the data as rows and columns, the DataList control will display them as a list of records with the columns in the data rendered displayed as rows.

This comes in handy, especially in situations where you have too many columns in your database table or columns with larger widths of data. As an example, imagine what would happen if there is a field called Address in our Employee table having data of large size and you are displaying the data using a Repeater, a DataGrid, or a GridView control. You will not be able to display columns of such large data sizes with any of these controls as the display would look awkward. This is where the DataList control fits in.

In a sense, you can think the DataList control as a combination of the DataGrid and the Repeater controls. You can use templates with it much as you did with a Repeater control and you can also edit the records displayed in the control, much like the DataGrid control of ASP.NET. The next section compares the features of the three controls that we have mentioned so far, that is, the Repeater, the DataList, and the DataGrid control of ASP.NET.

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 does not have Paging and Sorting functionalities build into it.

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.

Refer to the following screenshot, which displays a DataList control on a web form:

Working With ASP.NET DataList Control

The following list outlines the steps that you can follow to add a DataList control in a web page and make it working:

  1. Drag and drop a DataList control in the web form from the toolbox.
  2. Set the DataSourceID property of the control to the data source that you will use to bind data to the control, that is, you can set this to an SQL Data Source control.
  3. Open the .aspx file, declare the <ItemTemplate> element and define the fields as per your requirements.
  4. Use data binding syntax through the Eval() method to display data in these defined fields of the control.

You can bind data to the DataList control in two different ways, that is, using the DataSourceID and the DataSource properties. You can use the inbuilt features like selecting and updating data when using the DataSourceID property. Note that you need to write custom code for selecting and updating data to any data source that implements the ICollection and IEnumerable data sources. We will discuss more on this later. The next section discusses how you can handle the events in the DataList control.

Displaying Data

Similar to the Repeater control, the DataList control contains a template that is used to display the data items within the control. Since there are no data columns associated with this control, you use templates to display data. Every column in a DataList control is rendered as a <span> element.

A DataList control is useless without templates. Let us now lern what templates are, the types of templates, and how to work with them. A template is a combination of HTML elements, controls, and embedded server controls, and can be used to customize and manipulate the layout of a control. A template comprises HTML tags and controls that can be used to customize the look and feel of controls like Repeater, DataGrid, or DataList. There are seven templates and seven styles in all. You can use templates for the DataList control in the same way you did when using the Repeater control. The following is the list of templates and their associated styles in the DataList control

The Templates are as follows:

  1. ItemTemplate
  2. AlternatingItemTemplate
  3. EditItemTemplate
  4. FooterTemplate
  5. HeaderTemplate
  6. SelectedItemTemplate
  7. SeparatorTemplate

The following screenshot illustrates the different templates of this control.

Working With ASP.NET DataList Control

As you can see from this figure, the templates are grouped under three broad categories. These are:

  1. Item Templates
  2. Header and Footer Templates
  3. Separator Template

Note that out of the templates given above, the ItemTemplate is the one and only mandatory template that you have to use when working with a DataList control. Here is a sample of how your DataList control’s templates are arranged:

< asp:DataList id="dlEmployee" runat="server">
<HeaderTemplate>
...
</HeaderTemplate>
<ItemTemplate>
...
</ItemTemplate>
<AlternatingItemTemplate>
...
</AlternatingItemTemplate>
<FooterTemplate>
...
</FooterTemplate>
</asp:DataList>

The following screenshot displays a DataList control populated with data and with its templates indicated.

Working With ASP.NET DataList Control

Customizing a DataList control at run time
You can customize the DataList control at run time using the ListItemType property in the ItemCreated event of this control as follows:

private void DataList1_ItemCreated(object
sender, ...........System.Web.UI.WebControls.
DataListItemEventArgs e)
{
switch (e.Item.ItemType)
{
case System.Web.UI.WebControls.ListItemType.Item :
e.Item.BackColor = Color.Red;
break;
case System.Web.UI.WebControls.ListItemType.
AlternatingItem : e.Item.BackColor = Color.Blue;
break;
case System.Web.UI.WebControls.ListItemType.
SelectedItem : e.Item.BackColor = Color.Green;
break;
default :
break;
}
}

The Styles that you can use with the DataList control to customize the look and feel are:

  1. AlternatingItemStyle
  2. EditItemStyle
  3. FooterStyle
  4. HeaderStyle
  5. ItemStyle
  6. SelectedItemStyle
  7. SeparatorStyle

You can use any of these styles to format the control, that is, format the HTML code that is rendered.

You can also use layouts of the DataList control for formatting, that is, further customization of your user interface. The available layouts are as follows:

  • FlowLayout
  • TableLayout
  • VerticalLayout
  • HorizontalLayout

You can specify your desired flow or table format at design time by specifying the following in the .aspx file.

RepeatLayout = "Flow"

You can also do the same at run time by specifying your desired layout using the RepeatLayout property of the DataList control as shown in the following code snippet:

DataList1.RepeatLayout = RepeatLayout.Flow

In the code snippet, it is assumed that the name of the DataList control is DataList1.

Let us now understand how we can display data using the DataList control. For this, we would first drag and drop a DataList control in our web form and specify the templates for displaying data. The code in the .aspx file is as follows:

<asp:DataList ID="DataList1" runat="server">
<HeaderTemplate>
<table border="1">
<tr>
<th>
Employee Code
</th>
<th>
Employee Name
</th>
<th>
Basic
</th>
<th>
Dept Code
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr bgcolor="#0xbbbb">
<td>
<%# DataBinder.Eval(Container.DataItem,
"EmpCode")%>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem,
"EmpName")%>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem,
"Basic")%>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem,
"DeptCode")%>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:DataList>

The DataList control is populated with data in the Page_Load event of the web form using the DataManager class as usual.

protected void Page_Load(object sender, EventArgs e)
{
DataManager dataManager = new DataManager();
DataList1.DataSource = dataManager.GetEmployees();
DataList1.DataBind();
}

Note that the DataBinder.Eval() method has been used as usual to display the values of the corresponding fields from the data container in the DataList control. The data container in our case is the DataSet instance that is returned by the GetEmployees () method of the DataManager class.

When you execute the application, the output is as follows:

Working With ASP.NET DataList Control

LEAVE A REPLY

Please enter your comment!
Please enter your name here