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.

score 2 · Accepted Answer · answered Sep 07 '12 at 15:37

2

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" ...

answered Sep 07 '12 at 15:37

Icarus

63,293
14
100
115

That sounds like a great Idea. I will give it a try. Thanks – dherrin79 Sep 07 '12 at 15:46

Tim B James · Answer 2 · 2012-09-07T15:50:25.027

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/

I did consider this approach. I just wanted something a little more constraining than floating. If there was a way that I could add a div that clears the float after every fourth div I would have definitely used a css based layout. — dherrin79, Sep 07 '12 at 15:51

ASP.NET Repeater, Dynamically starting new table row

2 Answers2