Rendering n-column tables using the Repeater control

The ASP.NET Repeater control provides a template-based mechanism for rendering data using Data Binding. A basic usage sample can be found here .

The control uses the <ItemTemplate> tag for declaring HTML that should be rendered for each data item and a <SeparatorTemplate> tag to put some HTML between items. It also supports an <AlternatingItemTemplate> that can useful to render a fancy mixed two-color list or, more seriously, a two-column table. An example:

Page1.aspx

    <table border="1">
<asp:Repeater id="Repeater1" runat="server">
<ItemTemplate>
<tr>
<td>
<%# DataBinder.Eval(Container.DataItem, "ProductName") %>
</td>
</ItemTemplate>
<AlternatingItemTemplate>
<td>
<%# DataBinder.Eval(Container.DataItem, "ProductName") %>
</td>
</tr>
</AlternatingItemTemplate>
</asp:Repeater>
</table>

Page1.cs

        protected System.Web.UI.WebControls.Repeater Repeater1;

private void Page_Load(object sender, System.EventArgs e)
{
SqlConnection connection = new SqlConnection("Data Source=(local);Initial Catalog=Northwind;Integrated Security=SSPI;");
SqlCommand command = new SqlCommand("SELECT TOP 15 ProductId, ProductName FROM Products", connection);

            connection.Open();
Repeater1.DataSource = command.ExecuteReader(CommandBehavior.CloseConnection);
Repeater1.DataBind();
}

Resulting HTML

Alice Mutton	Aniseed Syrup
Boston Crab Meat	Camembert Pierrot
Carnarvon Tigers	Chai
Chang	Chartreuse verte
Chef Anton's Cajun Seasoning	Chef Anton's Gumbo Mix
Chocolade	Côte de Blaye
Escargots de Bourgogne	Filo Mix
Flotemysost

But what if need to render, lets say, a 3-column table?

Alice Mutton	Aniseed Syrup	Boston Crab Meat
Camembert Pierrot	Carnarvon Tigers	Chai
Chang	Chartreuse verte	Chef Anton's Cajun Seasoning
Chef Anton's Gumbo Mix	Chocolade	Côte de Blaye
Escargots de Bourgogne	Filo Mix	Flotemysost

And generically, a n-column table?

There's no <n-AlternatingItemTemplate> tag for this purpose. Yes, you could just programatically render the required HTML, loosing the design-time support. But you can also achieve this using a template-based approach maintaining design time support, using Data Binding events. Here's how.

 

A 3-column table using a template-based Repeater

To produce a 3-column table, all you need is render a <TD>...</TD> for each data item, and render a </TR><TR> every 3 items. Besides, you should place a <TR> befere the first item and a </TR> after the last item.

The difficult part on this is the "render a </TR><TR> every 3 items" thing. How can this be achieved using Data Binding? The answer is the ItemDataBound event.

When you invoke DataBind() method on a Data Binding enabled control, you can subscribe an event that is fired when each item is rendered. With some coding on this event, you can programmatically change the presentation of a specific data item. With this in mind, you can just count the items being rendered, and show or hide a separator </TR><TR> every three items.

A full example:

Page1.aspx

        <table border="1">
<tr>
<asp:Repeater id="Repeater1" runat="server">
<ItemTemplate>
<td><%# DataBinder.Eval(Container.DataItem, "ProductName") %></td>
</ItemTemplate>
<SeparatorTemplate>
</tr>
<tr>
</SeparatorTemplate>
</asp:Repeater>
</tr>
</table>

Page1.cs

        protected System.Web.UI.WebControls.Repeater Repeater1;
        protected int counter = 0;
protected int columnCount = 3;

private void Page_Load(object sender, System.EventArgs e)
{
SqlConnection connection = new SqlConnection("Data Source=(local);Initial Catalog=Northwind;Integrated Security=SSPI;");
SqlCommand command = new SqlCommand("SELECT TOP 15 ProductId, ProductName FROM Products", connection);

            connection.Open();
Repeater1.DataSource = command.ExecuteReader(CommandBehavior.CloseConnection);
Repeater1.ItemDataBound +=new RepeaterItemEventHandler(Repeater1_ItemDataBound);
Repeater1.DataBind();
}

        private void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Separator)
if((++counter % columnCount) != 0)
e.Item.Visible = false;
}

Cool? To get the full source code for this sample e-mail the author aribeiro@microsoft.com