Creating a webcontrol to enumerate the items in a Repeater webcontrol

Author: Luis Ramirez.
February 26, 2008.

Download DataItemCounter webcontrol

One task that I need to do one of these days was to display data using a Repeater webcontrol and for each row of data display its row number. It means, I need to enumerate the data items in the Repeater web control just as seen in the Figure 1.


Figure 1.

To enumerate data items within a data-bound control has different solutions. The easiest solution would be to display a data field that identify each data row, such as an identity field in Microsoft SQL Server. Another solution would be to create a variable that would be incremented each time that a item would be bound to the datasource. The third solution that comes to my mind is to create a custom webcontrol that you would have to copy and paste in your ASPX webform and it will make all the work for you. So finally I have decided to create DataItemCounter webcontrol to enumerate the items within a data-bound webcontrol (e.g. Repeater, ListView). The DataItemCounter webcontrol is an object oriented solution that I want to share with all the developers facing the same task than me.

Solution 1. Quick solution, but not a object oriented solution

In order to display the row index number for each data item within a Repeater I have created a variable named counter in the code behind file associated to my ASPX file.

1protected int currentIndex = 0;

I will add two lines of code to my ASPX markup. The first line will display the value of the counter variable. The second line will increment the counter variable.

1<ItemTemplate>
2  <%= currentIndex %> <br />
3  <% currentIndex = currentIndex + 1; %>
4</ItemTemplate>

As you can see it was not difficult to enumerate the data items in the Repeater control. However, we cannot reuse our solution and it will force us to repeat the same steps in all the ASPX file where we would want to enumerate the items.

Solution 2. DataItemCounter webcontrol, object oriented solution

I will create the DataItemCounter webcontrol to enumerate the items in the Repeater webcontrol. The code snippet below shows piece of code that renders the DataItemCounter webcontrol. Basically what the Render method does is to display the content of the current data item index.

 1public class DataItemCounter: Control
 2{
 3  protected override void Render(HtmlTextWriter writer)
 4  {
 5    if (this.NamingContainer == null)
 6      throw new ApplicationException("The parent naming container cannot be null.");
 7
 8    if (!(this.NamingContainer is IDataItemContainer))
 9      throw new ApplicationException("The parent container must implement the IDataItemContainer interface.");
10
11    IDataItemContainer dataItemContainer = (IDataItemContainer)this.NamingContainer;
12
13    writer.Write(string.Format(this.IndexFormat, dataItemContainer.DataItemIndex + this.IndexOffset));
14  }
15}

Now that I have created the DataItemCounter webcontrol I only need to use it within a Repeater control to enumerate the data items.

1<asp:Repeater ID="Repeater1" runat="server" DataSourceID="AccessDataSource1">
2    <ItemTemplate>
3    <SqlNetFrameworkWebControls:DataItemCounter ID="DataItemCounter1"  IndexFormat="{0}. " IndexOffset="1" 
4      runat="server"/><%# Eval("FieldName") %><br />
5    </ItemTemplate>
6</asp:Repeater>

Now you can enumerate the items in the Repeater webcontrol just as shown below in the Figure 2.


Figure 2.

The DataItemCounter can be used within any webcontrol whose data item objects implement the IDataItemContainer interface (e.g. Repeater, ListView).

The sample code has the full code of the DataItemCounter control and a web applications that uses the DataItemCounter control to show you how it works.

Download DataItemCounter webcontrol