ASP.NET Repeater, Dynamically starting new table row

Question

I have the following repeater:

<table>
        <asp:Repeater runat="server" ID="rptBrandRepeater">
            <ItemTemplate>
                <tr>
                    <td>
                        <asp:HyperLink runat="server" ID="lnkCompanyLink">
                            <asp:Image runat="server" ID="imgCompanyLogo" />
                        </asp:HyperLink>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:Repeater>
</table>

I want to start a new row every four table cells.

I don't want to used jQuery or Javascript to accomplish this.

The outputted html is supposed to look like this page: http://rmtequipment.com/golfandturf.aspx

I have made an interface that will allow them to add these logos on their own. So this page will be dynamically built.

What is the best way to accomplish this goal?

If a listview or gridview is a better approach I am open to that as well.

Thanks in advance.

Answer 1

The best approach in my opinion, is to use a DataList instead. You can control the RepeatDirection of the items as well as the # of columns via the RepeatColumns property and the layout to use via RepeatLayout.

So your DataList would be defined as:

<asp:DataList RepeatDirection="Horizontal" RepeatColumns="4" RepeatLayout="Table" ...

Answer 2

Your best approach would be to get rid of the table and use floated div elements since it is not a table nor contain tabular data.

<asp:Repeater runat="server" ID="rptBrandRepeater">
    <ItemTemplate>
        <div class="logo">
            <asp:HyperLink runat="server" ID="lnkCompanyLink">
                <asp:Image runat="server" ID="imgCompanyLogo" />
            </asp:HyperLink>
        </div>  
    </ItemTemplate>
</asp:Repeater>

Then style up your div

div.logo{ float: left; width: 200px; display: inline; }

This will then natuarally break onto the next "line" based on the width of the element which is containing all these logos.

See this basic demo for an example: http://jsfiddle.net/ygnEa/