Girish Gangadharan

Though this question has been answered in hundreds of blogs and articles online, some of us still consider this to be a grey area and leave it mostly to the developer’s preference.

Well…here’s what i understand about these web controls.

First of all, all the three controls were created with the same objective, which is to display data. So why are there 3 different controls?

When these controls are bound to a datasource, for each entity in the datasource an “item” is created and added to the collection of items for the control.

Each Webcontrol’s “item” belongs to a different class. For example, a DatagridItem class is derived from TableRow class. This is because the HTML rendered by a datagrid is nothing but an HTML table with rows and columns based upon the datasource it was bound to. Hence each item in a datagrid collection is nothing but an HTML table row, when it is displayed in the browser.

One big advantage of the datagrid is that it is very simple to use and easily customizable with some cool color settings for borders,backgrounds etc. It also supports paging and sorting which also is accompanied by some customizable features for example, the way the page index can be displayed, as numbers or “previous and next” links etc.

So if you have a source of data that needs to be displayed with no customization or no complex stuff, datagrid is the best choice.

But remember, you will have no control over the HTML table that is being rendered.

Like the rows, each column in a DataGrid is an instance of a class that is derived from the DataGridColumn class. There are five built-in DataGrid column types:

* BoundColumn
* ButtonColumn
* EditColumn
* HyperLinkColumn
* TemplateColumn

Besides these built-in data types we can also create our own customized DataGrid column types by creating a class that derives from the DataGridColumn class.

Most of the newbies out there do not pay attention to the most important issue in datagrids ; Viewstate. ViewState produced by the DataGrid can be humongous if it contains a considerably large number of rows and thus be detrimental to performance. Of course, you DO have the option to turn the viewstate off but then that doesn’t help you if you are planning to use sorting, paging and editing features in the datagrid.

Apparently the datagrid has the worst performance of all the 3 web controls.

The Repeater Web control offers the most flexibility as far as control of the rendered HTML is concerned. The datagrid and datalist controls place the content within a HTML tag like <table> or <span> automatically. That’s how they are rendered. But a Repeater control renders ONLY what is specified by the developer. For this reason, if you wish to display data in some way other than in an HTML <table> tag or in a series of <span>tags, Repeater control is the best choice.

A Repeater is designed to let the user customize its output and thus have complete control over what is being rendered. So understandably RepeaterItem class is not derived from the TableRow class.

Just like in the DataList, with Repeater you specify the markup using templates. The Repeater contains the following five templates:

* AlternatingItemTemplate
* FooterTemplate
* HeaderTemplate
* ItemTemplate
* SeparatorTemplate

An important thing to remember about the Repeater is that, it is not derived from the WebControl class, like the DataGrid and DataList due to which it lacks the stylistic properties common to both the DataGrid and DataList. So if you want to make things look pretty in a repeater, write it yourself . But in most cases this is what i want : Complete control over what is being rendered.(Yupp… i AM a control freak!)

Among all the 3 web controls in question, Repeater offers the best performance, though only slightly ahead of the datalist but beating datagrid by a considerable margin.

Finally about the datalist.

The DataList does not use columns as in datagrid.It uses templates to display items just like Repeaters. The advantage of using a template is that with a template, you can specify both a mix of HTML content and databinding syntax.

Along with the ItemTemplate the DataList supports six other templates for a total of seven:

* AlternatingItemTemplate
* EditItemTemplate
* FooterTemplate
* HeaderTemplate
* ItemTemplate
* SelectedItemTemplate
* SeparatorTemplate

By default, the DataList displays each item as an HTML tablerow. But an important property of datalist is the RepeatColumns property. Using this property you can specify how many DataList items should appear per table row. In addition to that, you can also specify if you want the contents of the DataList should be displayed using <span> tags instead of a <table> tags. This is done by setting the RepeatLayout property, to either Table or Flow, which would render the data in HTML <table> tags or in <span> tags.

With its templates and RepeatColumns and RepeatLayout properties, it’s obvious that the DataList allows for much more customization of the rendered HTML markup than the DataGrid. Thus customization again, is the reason why one might prefer to use a datalist over datagrid.

One major advantage of using Datagrid over datalist and repeater is, as already mentioned, the sorting and paging functionality. While such functionality can be implemented with some smart logic in the code, it’s the question of how much time and effort would be involved in doing it and whether the trade-off is worth it in the application development process.

Guess …that’s about it. This is just an overall view, at a very high level.

For more information,

Read Scott Mitchell’s article on the same topic