Microsoft.NET

……………………………………………….Expertise in .NET Technologies

DataList Control in ASP.NET

Posted by Ravi Varma Thumati on October 23, 2009

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.

DataList Control of ASP.Net 2.0 provides the functionality to display the data in form of ordered or unordered list of items. DataList control includes different types of templates that also enable you to select, edit, update or delete the data items.  You can organize the data items bound to the DataList control using simple HTML markup tags inside the templates. ItemTemplate field is the most necessary element of the DataList control that enables you to display the retrieved data items from any datasource. There are style templates also that can be used to customize the appearance of list items of DataList. Following are the types of templates of ASP.Net 2.0 DataList control:

1. ItemTemplate: This is the main template that displays the data content retrieved from the datasource in the specified layout and CSS style applied to it. ItemTemplate is the required template of DataList control.

2. AlternatingItemTemplate: You can define the alternate style for the data content that is to be displayed inside the DataList. Alternate template renders the data items according to the specified layout and appearance styles associated to it. If AlternateTemplate is not defined then DataList control renders the ItemTemplate only.

3. SeparatorTemplate: It allows you to separate the repeat layout of list items inside the DataList control. SeparatorTemplate renders the specified separator character, text or any HTML markup tag between items as well as alternating items.

4. SelectedItemTemplate: It displays the content with specified style and layout applied to the selected item template. SelectedItemTemplate renders only when selected index changed event of DataList control fires.

5. EditItemTemplate: You can place the textbox controls inside this template for the data fields to allow the users to update the old value with new one. EditItemTemplate renders when DataList control receives the edit command event signal.

6. HeaderTemplate: You can display the heading at the top of list items by specifying customized appearance for the header text.

7. FooterTemplate: Similar to HeaderTemplate you can also add the footer text with customized appearance under the DataList control’s data items.

There are some other types of templates available for DataList control that enable you to apply the style formatting of data list items. You can set the font styles, color, background color, and border styles etc using these style templates whereas DataList properties allow you to change the rendering style as well as common attributes to customize the layout of templates.

Each template of DataList control has its own style template that enables you to set the appearance of associated template only. For example, HeaderStyle template attributes set the styles for HeaderTemplate. Following are the style templates of DataList Control:

1. ItemStyle: This style template applies the styles to ItemTemplate.

2. AlternatingItemStyle: it applies the styles to AlternateItemTemplate. You can set alternate font color, background color for alternate data list items.

3. SeparatorStyle: you can apply the style formatting to separator between ItemTemplates and AlternateItemTemplate. SeparatorStyle set the styles for SeparatorTemplate that renders between each ItemTemplate and AlternateItemTemplate.

4. SelectedItemStyle: This style template changes the look of selected item. SelectedItemStyle works for SelectedItemTemplate. If SelectedItemTemplate does not exist inside the DataList control then it applies the styles to the ItemTemplate when “select” command action runs for any list item of DataList control.

5. EditItemStyle: it sets the styles for EditItemTemplate that renders when “edit” command action runs for any data list item.

6. HeaderStyle: You can set the styles for HeaderTemplate.

7. FooterStyle: Similar to HeaderStyle you can apply the styles to FooterTemplate of DataListControl.

RepeatColumns, RepeatDirection and RepeatLayout Properties

All these three properties enable you to customize the rendering behavior of DataList Control. RepeatColumns property accepts the numeric value that controls the number of columns to be display in horizontal direction. By default its value is 0 that renders the vertical DataList Items that means 1 item per row. You can set the RepeatColumns value equal to 4 or 5 to display the 4 or 5 items in each row.

Another repeat behavior property is RepeatDirection that controls the direction in which the items are laid out while rendering of DataList Control. RepeatDirection property supports two types of values:

1. Horizontal

2. Vertical

RepeatDirection=”Horizontal” renders the list items of DataList control in horizontal direction that displays the items side by side. While RepeatDirection=”Vertical” renders the list items in vertical direction that displays the items one by one vertically.

Third special property of ASP.Net 2.0 DataList control is RepeatLayout that also accepts two types of values:

1. Table

2. Flow

RepeatLayout=”Table” renders the data list items using HTML table tag. Table layout displays the list items in table rows and cells. By default DataList control renders the list items in a single vertical table layout. As RepeatColumns property value is 0 by default that renders a multiple rows and single cell layout of table. You can increase the number of cells in a row by increasing the value of RepeatColumns property value.

RepeatLayout=”Flow” removes the HTML table tag and renders the list items using HTML span tag. You must have knowledge of CSS Div based layout to assemble and organize the distorted structure of DataList rendered with Flow layout.

Following is the expected layout rendering of DataList control adjusted using:

1. RepeatColumns=”5″

2. RepeatLayout=”Table”

3. RepeatDirection=”Horizontal”

1 2 3 4 5
6 7 8 9 10
11 12 13 14

Following is the expected layout rendering of DataList control adjusted using:

1. RepeatColumns=”5″

2. RepeatLayout=”Table”

3. RepeatDirection=”Vertical”

1 4 7 10 13
2 5 8 11 14
3 6 9 12

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:

datalist3

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 element and define the fields as per your requirements.
  4. Use data binding syntax through the Eval() method to display data in these defi ned fi elds 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.

Bind a DataSet to a DataList Control

The DataList control may be bound to a database table, an XML file, or another list of items.

By using XML file.

We will use the following XML file in our examples (“cdcatalog.xml”):

<?xml version=”1.0″ encoding=”ISO-8859-1″?>

<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
<cd>
<title>Hide your heart</title>
<artist>Bonnie Tyler</artist>
<country>UK</country>
<company>CBS Records</company>
<price>9.90</price>
<year>1988</year>
</cd>
<cd>
<title>Greatest Hits</title>
<artist>Dolly Parton</artist>
<country>USA</country>
<company>RCA</company>
<price>9.90</price>
<year>1982</year>
</cd>
<cd>
<title>Still got the blues</title>
<artist>Gary Moore</artist>
<country>UK</country>
<company>Virgin records</company>
<price>10.20</price>
<year>1990</year>
</cd>
<cd>
<title>Eros</title>
<artist>Eros Ramazzotti</artist>
<country>EU</country>
<company>BMG</company>
<price>9.90</price>
<year>1997</year>
</cd>
</catalog>

First, import the “System.Data” namespace. We need this namespace to work with DataSet objects. Include the following directive at the top of an .aspx page:

<%@ Import Namespace=”System.Data” %>

Next, create a DataSet for the XML file and load the XML file into the DataSet when the page is first loaded:

<script runat=”server”>
sub Page_Load
if Not Page.IsPostBack then
dim mycdcatalog=New DataSet
mycdcatalog.ReadXml(MapPath(“cdcatalog.xml”))
end if
end sub

Then we create a DataList in an .aspx page. The contents of the <HeaderTemplate> element are rendered first and only once within the output, then the contents of the <ItemTemplate> element are repeated for each “record” in the DataSet, and last, the contents of the <FooterTemplate> element are rendered once within the output:

<html>
<body>

<form runat=”server”>
<asp:DataList runat=”server”>

<HeaderTemplate>

</HeaderTemplate>

<ItemTemplate>

</ItemTemplate>

<FooterTemplate>

</FooterTemplate>

</asp:DataList>
</form>

</body>
</html>

Then we add the script that creates the DataSet and binds the mycdcatalog DataSet to the DataList control. We also fill the DataList control with a <HeaderTemplate> that contains the header of the table, an <ItemTemplate> that contains the data items to display, and a <FooterTemplate> that contains a text. Note that the gridlines attribute of the DataList is set to “both” to display table borders:

<%@ Import Namespace=”System.Data” %>

<script runat=”server”>
sub Page_Load
if Not Page.IsPostBack then
dim mycdcatalog=New DataSet
mycdcatalog.ReadXml(MapPath(“cdcatalog.xml”))
cdcatalog.DataSource=mycdcatalog
cdcatalog.DataBind()
end if
end sub
</script>

<html>
<body>

<form runat=”server”>
<asp:DataList
gridlines=”both” runat=”server”>

<HeaderTemplate>
My CD Catalog
</HeaderTemplate>

<ItemTemplate>
“<%#Container.DataItem(“title”)%>” of
<%#Container.DataItem(“artist”)%> –
$<%#Container.DataItem(“price”)%>
</ItemTemplate>

<FooterTemplate>
Copyright Hege Refsnes
</FooterTemplate>

</asp:DataList>
</form>

</body>
</html>

Using the <AlternatingItemTemplate>

You can add an <AlternatingItemTemplate> element after the <ItemTemplate> element to describe the appearance of alternating rows of output. You may style the data in the <AlternatingItemTemplate> section within the DataList control:

<%@ Import Namespace=”System.Data” %>

<script runat=”server”>
sub Page_Load
if Not Page.IsPostBack then
dim mycdcatalog=New DataSet
mycdcatalog.ReadXml(MapPath(“cdcatalog.xml”))
cdcatalog.DataSource=mycdcatalog
cdcatalog.DataBind()
end if
end sub
</script>

<html>
<body>

<form runat=”server”>
<asp:DataList
runat=”server”
cellpadding=”2″
cellspacing=”2″
borderstyle=”inset”
backcolor=”#e8e8e8″
width=”100%”
headerstyle-font-name=”Verdana”
headerstyle-font-size=”12pt”
headerstyle-horizontalalign=”center”
headerstyle-font-bold=”True”
itemstyle-backcolor=”#778899″
itemstyle-forecolor=”#ffffff”
alternatingitemstyle-backcolor=”#e8e8e8″
alternatingitemstyle-forecolor=”#000000″
footerstyle-font-size=”9pt”
footerstyle-font-italic=”True”>

<HeaderTemplate>
My CD Catalog
</HeaderTemplate>

<ItemTemplate>
“<%#Container.DataItem(“title”)%>” of
<%#Container.DataItem(“artist”)%> –
$<%#Container.DataItem(“price”)%>
</ItemTemplate>

<AlternatingItemTemplate>
“<%#Container.DataItem(“title”)%>” of
<%#Container.DataItem(“artist”)%> –
$<%#Container.DataItem(“price”)%>
</AlternatingItemTemplate>

<FooterTemplate>
&copy; Hege Refsnes
</FooterTemplate>

</asp:DataList>
</form>

</body>

<html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: