How do you show x items per row in a repeater?

Question

Anyone have any clue on how to show 4 items going horizontal with a repeater? A repeater shows items going down by default. Here is my test repeater code so far:

Answer 1

Use a ListView http://msdn.microsoft.com/en-us/library/bb398790.aspx

<asp:ListView runat="server" ID="ListView1" 
    DataSourceID="SqlDataSource1" 
    GroupItemCount="5">
  <LayoutTemplate>
    <table runat="server" id="table1">
      <tr runat="server" id="groupPlaceholder">
      </tr>
    </table>
  </LayoutTemplate>
  <GroupTemplate>
    <tr runat="server" id="tableRow">
      <td runat="server" id="itemPlaceholder" />
    </tr>
  </GroupTemplate>
  <ItemTemplate>
    <td runat="server">
      <%-- Data-bound content. --%>
      <asp:Label ID="NameLabel" runat="server" 
          Text='<%#Eval("Name") %>' />
    </td>
  </ItemTemplate>
</asp:ListView>

Answer 2

Scott Guthrie provided an example of how to do this with a ListView control in the following article. He uses the control to render an unordered list and uses CSS to control the layout.

Answer 3

Try to set a CSS class for your <td> tags, and set an explicit width.

Answer 4

This might do the job (I'm assuming you may have more than one row of four images):

<asp:Repeater ID="rptTest" runat="server">

<HeaderTemplate>
<table border=0 cellpadding=0 cellspacing=0 align="center" width="800px">
<tr>
</HeaderTemplate>

<ItemTemplate>
<%# (Container.ItemIndex != 0 && Container.ItemIndex % 4 == 0) ? @"</tr><tr>" : string.Empty %>
<td>
<h3><a href="<%#GetItemLink((Item)Container.DataItem) %>"><%# (WebMenuItem)Container.DataItem).Name %></a></h3>
<div>
<a href="<%#GetUrl((Item)Container.DataItem) %>"><img src="<%#GetImage((Item)Container.DataItem) %>" alt="<%#GetAltText((Item)Container.DataItem) %>" /></a>
</div>
</td>
</ItemTemplate>

<FooterTemplate>
</tr>
</table>
</FooterTemplate>

</asp:Repeater>

(no IDE so untested :)

If it doesn't help, some answers from this question might.

Answer 5

Using DataList control with RepeatColumns property might be simpler :

DataList1.RepeatColumns = 4;
DataList1.RepeatDirection = RepeatDirection.Horizontal;

Answer 6

<table>
    <asp:Repeater id="rptTest" runat="server">
        <ItemTemplate>
            <%# (Container.ItemIndex + 4) % 4 == 0 ? "<tr>" : string.Empty %>
                <td>
                    ... cell contents omitted ...
                </td>
            <%# (Container.ItemIndex + 4) % 4 == 3 ? "</tr>" : string.Empty %>
        </ItemTemplate>
    </asp:Repeater>
</table>

Long live the humble repeater!