¿Cómo se muestran x artículos por fila en un repetidor?

Question

¿Alguien tiene alguna pista sobre cómo mostrar 4 elementos en posición horizontal con un repetidor? Un repetidor muestra elementos que se apagan por defecto. Aquí está mi código de prueba repetidor hasta el momento:

<table border=0 cellpadding=0 cellspacing=0 align="center" width="800px;> 
    <tr> 
     <asp:Repeater ID="rptTest" runat="server"> 
      <ItemTemplate> 
        <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> 
     </asp:Repeater> 
    </tr> 
</table> 

Answer 1

intenta establecer una clase CSS para sus <td> etiquetas, y configure la anchura explícita.

Answer 2

El uso del control DataList con la propiedad RepeatColumns podría ser más simple:

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

Answer 3

Scott Guthrie proporciona un ejemplo de cómo hacer esto con un control ListView en el siguiente article. Él usa el control para generar una lista desordenada y usa CSS para controlar el diseño.

Answer 4

Usar un 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 5

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

Viva el repetidor humilde!

Answer 6

Esto podría hacer el trabajo (estoy asumiendo que puede tener más de una fila de cuatro imágenes):

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

(IDE ninguna manera no probado :)

Si no ayuda , algunas respuestas de this question podrían.

Answer 7

Modificando la sugerencia de Nick que pude utilizar para hacer una cuadrícula de imagen vertical 5 horizontal x n. Gracias Nick!

<asp:Repeater ID="colorsList" runat="server"> 
    <HeaderTemplate> 
     <table> 
     <tr> 
    </HeaderTemplate> 
    <ItemTemplate> 
     <%# (Container.ItemIndex != 0 && Container.ItemIndex % 5 == 0) ? @"</tr><tr>" : string.Empty %> 
     <td> 
     <div><img src="<%#ColorThumbnailImage((string)DataBinder.Eval(Container.DataItem, "COLOR_SQUARE_IMAGE")) %>" /></div> 
     <div><%# DataBinder.Eval(Container.DataItem, "COLOR_NAME") %></div> 
     </td> 
    </ItemTemplate> 
    <FooterTemplate> 
     </tr></table> 
    </FooterTemplate> 
    </asp:Repeater> 

Y aquí es ColorThumbnailImage

protected string ColorThumbnailImage(string fileName) 
{ 
    return Request.ApplicationPath + MySports.System.Configuration.ColorSquareImageLocation + fileName; 
}