CODEWITHSUNDEEP
asp.netrepeaternewrow
dherrin79
dherrin79

Reputation: 377

ASP.NET Repeater, Dynamically starting new table row

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.

Upvotes: 1

Views: 2856

Answers (2)

Tim B James
Tim B James

Reputation: 20364

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/

Upvotes: 1

Icarus
Icarus

Reputation: 63956

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

Upvotes: 2

Related Questions