Formatting data in columns with ASP.NET's DataList control

ASP.NET provides plenty of data controls to present data in a variety of ways. One common format is displaying a list of items in column format. Learn how to achieve this layout with the DataList control.

I was recently talking to a developer about presenting data on a Web page in columns. That is, individual data elements are repeated across the page in a set number of columns and this is repeated down the page. The developer was writing a lot of code to make the Repeater control do the trick. While this approach works, it is much simpler to use the DataList data control.

DataList control

The DataList control is just one of the controls available in ASP.NET. It is analogous to the Repeater control since it repeatedly displays fields from a data source. The difference lies in the DataList control's support for repeating data fields horizontally (in columns).

The DataList's default formatting utilizes XHTML table cells. Like Repeater and other data controls, the DataList control uses templates to control the formatting of output. Listing A contains the syntax for using DataList controls.

The previous list of options is not exhaustive; you can find a more comprehensive overview available online. Here is a breakdown of a few of the critical elements of the DataList declarative syntax:

  • RepeatColumns: This allows you to designate how many columns appear in the output when the output format is table.
  • RepeatDirection: This defines the repeat direction for table layout. Items appear top to bottom (across specified columns) with the vertical selection and left-to-right with the horizontal selection.
  • RepeatLayout: This signals whether an XHTML table is used (table) or not.
  • Gridlines: This defines where/if lines appear around the content (when layout is a table).
Weekly .NET tips in your inbox
TechRepublic's free .NET newsletter, delivered each Wednesday, contains useful tips and coding examples on topics such as Web services, ASP.NET, ADO.NET, and Visual Studio .NET.
Automatically sign up today!

Simple example

A good way to demonstrate the DataList is through an example. The ASP.NET C# page in Listing B displays all customer names from the standard SQL Server Northwind database.

The actual data (company name) is displayed via the ItemTemplate element. The CompanyName field is pulled from the data source bound to the control and displayed via an ASP.NET Label control.

The AlternatingItemTemplate displays every other item in the output (a yellow background is used for demonstration). The SeparatorTemplate defines what appears between individual data elements in the output, so a line break appears in the previous example. Listing C contains the equivalent VB.NET code.

Extending the example

The previous example provides a simple and straightforward way to output data fields in an easy to follow format. It is a good way to display a list of names and allow the user to select the name for more information. This is the approach taken in the next example.

The following code extends the previous example by making individual DataList fields hyperlinks that open another ASP.NET page to view details of the selected company name. The DataList Web Form is presented first in Listing D.

The individual field values from the previous example are linked to open the following Web Form. The CustomerID value is passed to the next form via a QueryString variable. This value is passed to a database call that loads the company details in the form in Listing E.

The combination of the two forms allows the user to quickly browse through a list of company names and select one for more details. Listing F contains the equivalent VB.NET. Listing G contains the VB.NET version of the details page.

Events and more

The DataList control uses the same event model as other data controls. That is, you can: work with data as it is bound to the control via the ItemDataBound event; handle updates/deletes/edits with the ItemCommand event, and so forth. If you are familiar with the events of other controls like the Repeater or DataGrid, you will have no problem. You can refer to the online documentation for more details on DataList events and other details of working with it.

More options available

The many ASP.NET data controls provide various ways to present data on a Web page. Some of the controls are better at certain tasks than others. A good example is the DataList control, which makes it easy to present data in multiple columns ordered vertically or horizontally with plenty of other options available. The key to using the controls is knowing what each can do easily and take advantage of their functionality when appropriate.

Miss a column?

Check out the .NET Archive, and catch up on the most recent editions of Tony Patton's column.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.