Repeater a varias columnas

[zacktagnan]

Hola a tod@s:

Trabajando en C#

Teniendo un Repeater para sacar un listado de Usuarios, en el que, por ejemplo, vayan datos de Imagen Foto, Nombre, Apellidos por cada usuario.

Lo que quiero es que el resultado visible en el navegador no sea de uno por fila del Repeater, sino, por ejemplo, de dos por fila, como si fuera una tabla de dos columnas por fila.

--------------------------------------------------
Bloque Datos Usuario 1 | Bloque Datos Usuario 2
--------------------------------------------------
Bloque Datos Usuario 3 | Bloque Datos Usuario 4
--------------------------------------------------
...
--------------------------------------------------
Bloque Datos Usuario Y | Bloque Datos Usuario Z
--------------------------------------------------

¿Alguien me podría decir como montar el código necesario para conseguirlo?

[zacktagnan]

¿Ninguna sugerencia, por favor?

[sabinajoa]

Hola!
Tengo que hacer lo mismo que tu, encontraste la solución?

Muchas gracias

[zacktagnan]

Hola sabinajoa:

No, todavía no he encontrado la solución. Sigo esperando a que alguien me indique las pistas necesarias para conseguir el resultado deseado.

¿Tu también estás trabajando en C#?

Bueno, yo en funcionamiento, en un ejemplo de aplicación he visto que se puede conseguir. Se trata de la aplicación MSDN Video.
(http://www.desarrollaconmsdn.com/msdn/MSDNVideo.aspx)

Desde el enlace [Frontal web], se ve como se ejecuta una lista con la información de dos películas por cada fila.

Yendo a la Guía de Implementación >> Consulta online >> Frontal web >> Control lista de películas
ó
http://www.desarrollaconmsdn.com/msd...aPeliculas.htm
se llega a una pequeña explicación de como construir un DataSet para que almacene dos registros por cada fila.

Me baje el proyecto pero está hecho en VisualBasic.
Abrí el archivo (uno llamado ListaPeliculas.ascx dentro de la carpeta Cliente Web) para ver si podía pasarlo a código .CS pero no llego a transformarlo sin que me dé error. Hay cosas que no sé a qué se refieren.

Este es parte del código del archivo en el parte de código[ListaPeliculas.ascx.vb]
(en negrita, la parte relacionada con lo comentado)

Código:

Imports System
Imports System.Data

Imports ClienteWeb.ServicioCatalogo

Partial Class ListaPeliculas
    Inherits System.Web.UI.UserControl

#Region " Web Form Designer Generated Code "

    'This call is required by the Web Form Designer.
    <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()

    End Sub
    Protected WithEvents DataList1 As System.Web.UI.WebControls.DataList
    Protected WithEvents Literal1 As System.Web.UI.WebControls.Literal
    Protected WithEvents Repeater2 As System.Web.UI.WebControls.Repeater

    'NOTE: The following placeholder declaration is required by the Web Form Designer.
    'Do not delete or move it.
    Private designerPlaceholderDeclaration As System.Object

    Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
        'CODEGEN: This method call is required by the Web Form Designer
        'Do not modify it using the code editor.
        InitializeComponent()
    End Sub

#End Region

    Private _peliculas As PeliculasDS
    Private _comenzarEn As Integer

    ...
    ...
    ...

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    End Sub

    Public Property Peliculas() As PeliculasDS
        Get
            Return _peliculas
        End Get
        Set(ByVal Value As PeliculasDS)
            _peliculas = Value
        End Set
    End Property

    Public Property Lista() As String()
        Get
            Return Nothing
        End Get
        Set(ByVal Value As String())

        End Set
    End Property

    Public Property ComenzarEn() As Integer
        Get
            Return _comenzarEn
        End Get
        Set(ByVal Value As Integer)
            _comenzarEn = Value
        End Set
    End Property

    Private Property PrimerOrdinal() As Integer
        Get
            If ViewState(Me.ID + "_PrimerOrdinal") Is Nothing Then
                ViewState(Me.ID + "_PrimerOrdinal") = 1
            End If
            Return CInt(ViewState(Me.ID + "_PrimerOrdinal"))
        End Get
        Set(ByVal Value As Integer)
            ViewState(Me.ID + "_PrimerOrdinal") = Value
        End Set
    End Property

    Public Property Paginacion() As Boolean
        Get
            Return PanelPagina.Visible
        End Get
        Set(ByVal Value As Boolean)
            PanelPagina.Visible = Value
        End Set
    End Property

    ...
    ...
    ...

    Private Sub Page_DataBinding(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.DataBinding
        Dim dsPeliculas As New DataSet
        Dim i As Integer
        Dim dt As DataTable
        Dim dc As DataColumn

        ' Hay registros?
        If Not IsPostBack And _peliculas.Peliculas.Count = 0 Then
            SinRegistros.Visible = True
            PanelPagina.Visible = False
            Return
        End If

        ' Caben en una página?
        If Not IsPostBack And _peliculas.Peliculas.Count < Integer.Parse(NumRegistros.SelectedValue) Then
            PanelPagina.Visible = False
            PanelLinea.Visible = True
        End If

        ' Es ésta la última página?
        If Paginacion And Integer.Parse(NumRegistros.SelectedValue) = _peliculas.Peliculas.Count Then
            ' Almaceno último registro
            ViewState(Me.ID + "_UltimoCodBarras") = _peliculas.Peliculas(_peliculas.Peliculas.Count - 1).CodBarras
            ViewState(Me.ID + "_UltimoTitulo") = _peliculas.Peliculas(_peliculas.Peliculas.Count - 1).Titulo
            derecha.Visible = True
        Else
            derecha.Visible = False
        End If
        ViewState(Me.ID + "_NumRegistros") = _peliculas.Peliculas.Count

        '
        ' Gestión del primer registro para poder volver hacia atrás
        '
        ' Es la primera página?
        If Not IsPostBack Then
            ViewState(Me.ID + "_PeliculaPrimeraPagina") = _peliculas.Peliculas(0).CodBarras
            izquierda.Visible = False
        Else
            ' Quedan páginas a la izquierda?
            If _peliculas.Peliculas.Count > 0 AndAlso _peliculas.Peliculas(0).CodBarras = CStr(ViewState(Me.ID + "_PeliculaPrimeraPagina")) Then
                izquierda.Visible = False
                derecha.Visible = True
                PrimerOrdinal = 1
            Else
                izquierda.Visible = True
            End If
        End If
        If _peliculas.Peliculas.Count > 0 Then
            Viewstate(Me.ID + "_PrimerCodBarras") = _peliculas.Peliculas(0).CodBarras
            Viewstate(Me.ID + "_PrimerTitulo") = _peliculas.Peliculas(0).Titulo
        End If

        ' Creamos DataSet artificial para la lista de dos columnas
        dt = dsPeliculas.Tables.Add("Peliculas")
        dt.Columns.Add("Titulo0", GetType(String))
        dt.Columns.Add("Sinopsis0", GetType(String))
        dt.Columns.Add("CodBarras0", GetType(String))
        dt.Columns.Add("Titulo1", GetType(String))
        dt.Columns.Add("Sinopsis1", GetType(String))
        dt.Columns.Add("CodBarras1", GetType(String))
        dt.Columns.Add("Ordinal", GetType(Integer))

        If _peliculas.Peliculas.Count > 0 Then
            For i = _comenzarEn To _peliculas.Peliculas.Count - 1 Step 2
                Dim row(6) As Object

                row(0) = _peliculas.Peliculas(i).Titulo
                row(1) = _peliculas.Peliculas(i).Sinopsis
                row(2) = _peliculas.Peliculas(i).CodBarras

                If (i + 1 < _peliculas.Peliculas.Count) Then
                    row(3) = _peliculas.Peliculas(i + 1).Titulo
                    row(4) = _peliculas.Peliculas(i + 1).Sinopsis
                    row(5) = _peliculas.Peliculas(i + 1).CodBarras
                End If
                row(6) = i + PrimerOrdinal

                dt.Rows.Add(row)
            Next i

            Repeater1.DataSource = dsPeliculas

        End If
    End Sub
End Class


Public Delegate Sub PaginaEventHandler(ByVal sender As Object, ByVal e As ListaPeliculasEventArgs)

Public Class ListaPeliculasEventArgs
    Inherits EventArgs

    Private _ultimaPelicula As String
    Private _ultimoCodBarras As String
    Private _numRegistros As Integer

    Public Sub New(ByVal ultimaPelicula As String, ByVal ultimoCodBarras As String, ByVal numRegistros As Integer)
        _ultimaPelicula = ultimaPelicula
        _ultimoCodBarras = ultimoCodBarras
        _numRegistros = numRegistros
    End Sub

    Public ReadOnly Property UltimaPelicula()
        Get
            Return _ultimaPelicula
        End Get
    End Property

    Public ReadOnly Property UltimoCodBarras()
        Get
            Return _ultimoCodBarras
        End Get
    End Property

    Public ReadOnly Property NumRegistros()
        Get
            Return _numRegistros
        End Get
    End Property

End Class

Por ejemplo, en la línea
[For i = _comenzarEn To _peliculas.Peliculas.Count - 1 Step 2]

no sé a que se refiere el integer _comenzarEn, si empieza desde cero ó que...

Y tampoco sé a que se refiere .Peliculas, si es un DataSet ó que. Y si lo es, en este documento no veo que esté definido por ningún lado, creo yo; ¿igual lo está en otro al que está vinculado?, no sé...

También me ha dado fallos en las líneas:
dt.Columns.Add("Titulo0", GetType(String)) en la parte GetType... que no acepta...

Bueno, no sé eso es lo que tengo y que no me funciona al quererlo pasar a C#.


A ver si alguien sabe e indica cómo hacerlo para C#...

[zacktagnan]

Entonces, ¿a nadie se le ocurre nada...?

[moNTeZIon]

Veamos, creo que se están liando más de la cuenta..
En el ItemTemplate del Repeater, podrían poner algo así:

Código:

<ItemTemplate>
    <asp:Literal ID="TRItem" runat="server"><tr style="height: 100px;"></asp:Literal>
        <td>
            
            ' Mostramos los DataItem

        </td>
    <asp:Literal ID="EndTRItem" runat="server"></tr></asp:Literal>
</ItemTemplate>

Luego, en el evento miRepeater_ItemDataBound, te encargas de hacer visibles los literales, en función de lo que necesites.
por ejemplo, para hacerlo a dos columnas, yo haría algo así:

Código:

Protected Sub miRepeater_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles miRepeater.ItemDataBound
    Select Case e.Item.ItemType
        Case ListItemType.Item, ListItemType.AlternatingItem

            ' TR y TD de la Tabla
            Dim litTR As Literal = e.Item.FindControl("TRItem")
            Dim litEndTR As Literal = e.Item.FindControl("EndTRItem")
            If e.Item.ItemIndex Mod 2 = 0 Then 'SI ES ALGUNO DE LA COLUMNA IZQUIERDA
                litTR.Visible = True
                litEndTR.Visible = False
            Else  ' SI ES ALGUNO DE LA COLUMNA DERECHA
                litTR.Visible = False
                litEndTR.Visible = True
            End If

    End Select
End Sub

De forma que se iría montando una tabla a dos columnas.
Espero que os ayude.
Suerte!

[zacktagnan]

Hola moNTeZIon. Ya he probado lo que sugerías después de adaptarlo a C#.
Aunque no he quedado del todo satisfecho.

Primero presento como me ha quedado el código y luego digo lo que no me satisface.

Así me quedó el código (que termina mostrando los resultados del Repeater a dos columnas):

[ en el archivo .aspx, dentro del Repeater ]

Código:

<ItemTemplate>
    <asp:Literal ID="inicioFila" runat="server"><tr></asp:Literal>
        <td>

            'DATOS

        </td>
    <asp:Literal ID="finFila" runat="server"></tr></asp:Literal>
</ItemTemplate>

[ en el archivo .aspx.cs ]

Código:

protected void list_usu_rep_2_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
        Literal lit_IniFila = (Literal)e.Item.FindControl("inicioFila");
        Literal lit_FinFila = (Literal)e.Item.FindControl("finFila");
        switch (e.Item.ItemType) {
                case ListItemType.Item:
                case ListItemType.AlternatingItem:
                        // TR y TD de la Tabla
                        if ((e.Item.ItemIndex % 2) == 0)
                        {
                                // SI ES ALGUNO DE LA COLUMNA IZQUIERDA
                                lit_IniFila.Visible = true;
                                lit_FinFila.Visible = false;
                        }
                        else
                        {
                                // SI ES ALGUNO DE LA COLUMNA DERECHA
                                lit_IniFila.Visible = false;
                                lit_FinFila.Visible = true;
                        }
                        break;
        }
}

Como ya he comentado, tal como está me saca el Repeater a dos columnas. Vale.

[Ahora viene lo que no me satisface]

1º- Lo de a "dos columnas", era por poner un número.

Lo que quiero es que el resultado visible en el navegador no sea de uno por fila del Repeater, sino, por ejemplo, de dos por fila, como si fuera una tabla de dos columnas por fila.

Es decir, si quiero que sea a 3, ó 4, ó las que sean, no me aclaro cómo puede ser...

2º- En la parte del AlternatingItem, he tratado de que saliera con otro color de fondo, pero no me lo muestra ¿Por qué?

[moNTeZIon]

Sabes la diferencia entre el apartado ListItemType.Item y ListItemType.AlternatingItem, en tu select case??
Veo que sólo usas la opción del Case "AlternatingItem".. Por qué haces eso?
Viste el código que mostré más arriba? Hay algo que no entiendas?
Viendo tu code se me ha ocurrido que también puedes jugar con Item y AlternatingItem, sin tener que hacer el "apaño" del literal del <TR>, ya que el repeater ya te trae la posibilidad de diferenciar un registro del siguiente con Item y AltrernatingItem, por ejemplo poniéndole un fondo rojo a la celda en ITEM, y al otro fondo azul a la celda en ALTERNATINGITEM.
En fin, a ver si te sales.
Un saludo!

[zacktagnan]

Buenas de nuevo moNTeZIon:

Sabes la diferencia entre el apartado ListItemType.Item y ListItemType.AlternatingItem, en tu select case??

Saber, saber con exactitud ó con total certeza, no. Lo que he hecho es suponer que se quería contemplar ó construir ó llamar a ejecutar determinado código para el caso del elemento ItemTemplate y otro para el caso AlternatingItemTemplate.
¿¿Es así ó me equivoco??
Si nop es esto, te agradecería que me dijeras exactamente cuál es la diferencia ó el significado exacto.

Veo que sólo usas la opción del Case "AlternatingItem".. Por qué haces eso?

Es verdad que pongo

Código:

...
        switch (e.Item.ItemType) {
                case ListItemType.Item:
                case ListItemType.AlternatingItem:    
                        //CÓDIGO
...

De primeras, lo puse así porque interpreté que el mismo código iba a valer tanto para el caso de ListItemType.Item como para el de ListItemType.AlternatingItem.
Luego poniendo el bloque de código, con alguna diferencia, en cada uno de los case, pero no resultaba nada diferente y el efecto era el mismo que si lo ponía como te he indicado.

También, en la parte HTML, puse un <AlternatingItemTemplate> aplicándole a la etiqueta TR dentro del Literal un estilo de color de fondo, pero tampoco me lo mostró...

Así que no sé como hacer en este caso lo de hacer líneas alternas con fondos decolor diferente...

Viendo tu code se me ha ocurrido que también puedes jugar con Item y AlternatingItem, sin tener que hacer el "apaño" del literal del <TR>, ya que el repeater ya te trae la posibilidad de diferenciar un registro del siguiente con Item y AltrernatingItem, por ejemplo poniéndole un fondo rojo a la celda en ITEM, y al otro fondo azul a la celda en ALTERNATINGITEM.

Y aquí no sé a que otra forma te puedes referir para hacerlo sin lo del apaño del literal...
Si me lo detallas mejor...


Y lo de hacer a otro número de columnas, ¿sabrías decirme cómo?
Si quisiera hacerlo a 3 columnas, 4 columnas, ¿como sería?

[moNTeZIon]

Hola zacktagnan.
Item y AlternatingItem sirve para diferenciar un registro del siguiente, como ya te comenté. Para ello, claro está, debes definir una template para Item y otra template para AlternatingItem.
De esta forma, puedes poner un color de fondo distinto en cada caso, y sin hacer nada más, ya deberías notar el cambio de un registro a otro.

Para el tema de varias columnas, entonces ya te puedes olvidar de Item y AlternatingItem.
En tal caso, solo construye una ItemTemplate, y en el select case del evento DataBound, deberías poner, en la misma opción del case, tanto Item como AlternatingItem.
Quedaría algo así:

Código:

switch (e.Item.ItemType) {
    case ListItemType.Item, ListItemType.AlternatingItem:
                // TR y TD de la Tabla
                if ((e.Item.ItemIndex % 2) == 0)
                {
                        // SI ES ALGUNO DE LA COLUMNA IZQUIERDA
                        lit_IniFila.Visible = true;
                        lit_FinFila.Visible = false;
                }
                else
                {
                        // SI ES ALGUNO DE LA COLUMNA DERECHA
                        lit_IniFila.Visible = false;
                        lit_FinFila.Visible = true;
                }
                break;
}

En visual basic se separan las opciones del case con comas (,), en c# no se como será.
La clave para las varias columnas está en el (... % 2)
El 2 lo cambias por las columnas que quieras..
Venga haz tus pruebas y nos cuentas.
Un saludo.

[phinojosa]

Una solución tan simple y sencilla es aplicando CSS a los items del Repeater.
Asi podriamos ubicar un repeater con n cantidad de columnas todo depende del ancho del <div> que se ubique aca un ejemplo de como deberia quedar......

Código HTML:

#BlockItemSubMenu { width:620px; display:block; }
#BlockItemSubMenu .ItemSubMenu{	 width:195px; float:left; height:90px;  }

Y es justamente el float:left el que permite que se realice el efecto de N columnas.

Aca el repeater llamando al estilo arriba indicado.

Código HTML:

<div id="BlockItemSubMenu">
	<asp:Repeater id="rptItemList" runat="server">
		<ItemTemplate>
			<div class="ItemSubMenu">
				<asp:Literal ID="litDescription" Runat="server" /><br>
			</div>				
		</ItemTemplate>
	</asp:Repeater>
</div> 

[moNTeZIon]

Todavía me parece mejor solución, si funciona

[zacktagnan]

Pues si, es otra buena solución en la que no se me había ocurrido pensar por eso de estar pensado en cómo hacerlo por código y no de otra forma más sencilla empleando CSS...

Bien phinojosa.

[phinojosa]

De nada zacktagnan.

Que bueno que te haya servido la solución planteada....

Saludos,