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

 

Comments (1)

Comments are closed.

Skip to main content