none
Utilizando repeater RRS feed

  • Pergunta

  • Boa Noite Galera estou com um problema no trabalho.

     

    No meu trabalho tive que criar tres repeater que contem um gridView tres div, ai eu quebro os repeater por causa do tamanho da pagina para deixar um do lado do outro, tem como em apenas um repeater eu deixar um do lado do outro sei la contar quantas vezes ja foi feito o repeater ai eu quebro algo desse genero.

     

    Att:

    Cleiton Novais

    quinta-feira, 13 de outubro de 2011 00:31

Respostas

  • Entendo, bom é possível sim fazer mas não tão fácil como no DataList, vamos ter que brincar um pouco com o espaçamento da página para chegar ao resultado:

    Fiz um teste aqui para exemplificar, digamos que eu tenha o seguinte ASPX:

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ListaErros.aspx.cs" Inherits="JQTest.ListaErros" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="estilo.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server" >
    
          <div style="width:800px;">    <br/>        <asp:Repeater ID="Repeater1" runat="server" 
            onitemdatabound="Repeater1_ItemDataBound">
            <HeaderTemplate>
                
            </HeaderTemplate>
            <ItemTemplate>
                <div id="blocoBase" runat="server" style="float:left; padding:0 5px 5px 0; color:#3D3D3D; width:164px; height:160px; ">
                    <div style="float:left; padding:6px 50px 0 15px;">
                        <img class="imgStatus" alt="Exceção não verificada" src="<%# DataBinder.Eval(Container.DataItem, "status") %>"/>
                    </div>
                    <div id="tituloSistemaEX">
                        <%# DataBinder.Eval(Container.DataItem, "nomeSistema") %>
                    </div>
                    <div id="usuarioClienteEX">
                        Usuário: <%# DataBinder.Eval(Container.DataItem, "usuarioCliente") %>
                    </div>
                    <div id="bodyEX">
                        <div class="divCampoExcecao" style="height:32px;">
                            <span class="textoSmallBold">
                                Tipo: <span title="<%# DataBinder.Eval(Container.DataItem, "tipoExcecao") %>" class="textoSmall"><%# DataBinder.Eval(Container.DataItem, "tipoExcecao") %></span>
                            </span>
                        </div>
                        <div class="divCampoExcecao" style="height:60px;">
                            <span class="textoSmallBold">
                                Descrição: <span class="textoSmall"><%# DataBinder.Eval(Container.DataItem, "descricaoExcecao") %></span>
                            </span>
                        </div>
                    </div>
                    <div id="divDataEX">
                    <a id="detalhes" href="<%# "DetalhesErro?ID=" + DataBinder.Eval(Container.DataItem, "idExcecao") %>">Detalhes</a><span id="dataEX"><%# DataBinder.Eval(Container.DataItem, "dataExcecao") %></span></div>
                </div>
            </ItemTemplate>
            <FooterTemplate>        
            </FooterTemplate>
            </asp:Repeater>
          </div><br/>    </form>
    </body>
    </html>
    
    

     


    Este código gera a seguinte imagem:

    Ou seja, temos 4 colunas, mas se eu quiser apenas 3 colunas, como devo fazer? Veja que o div antes do Repeater tem um tamanho fixo:

     

    <div style="width:800px;">    
    

    E veja que meu div dentro do ItemTemplate "blocoBase" possui no style a propriedade "float:left;", que fará com que cada bloco gerado, cada item do repeater, fique alinhado à esquerda, ou seja, todos os blocos forçarão para o lado esquerdo.

     

    <div id="blocoBase" runat="server" style="float:left; padding:0 5px 5px 0; color:#3D3D3D; width:164px; height:160px; ">
    

     


    Feito isso, para mudarmos o número de colunas, basta mudarmos o tamanho do espaço que os blocos possuem para se distribuir, é só mudar o width do div onde o Repeater está. Mudando o width para 600px veja o que acontece:

     

    Agora temos as 3 colunas.

    Qual o problema desta abordagem? Este é um caso simples, foi fácil ajustar, mas pode ter situações onde o formato das informações dentro do ItemTemplate pode dificultar o ajuste de espaçamento, se o tamanho da tela onde as informações estão sendo visualizadas variar muito pode causar imprevistos no layout, tudo vai depender de como esta estruturado seu HTML e CSS. Portanto, faça testes em browsers diferentes com tamanhos de tela diferentes.

    Espero ter respondido. Abraços :)

     


    quinta-feira, 13 de outubro de 2011 12:28

Todas as Respostas

  • Bom dia Novais, não entendi exatamente o que você precisa, no mcaso dentro de cada repeater você tem controles GridView?

    Você quer que as informações de um dos repeaters seja impressa lateralmente uma quantidade fixa de vezes e depois ocorra a quebra de linha e continue a impressão? é isso?

    Se este for o caso é mais recomendável utilizar o DataList que permite você informar quantas colunas você quer através da propriedade RepeatColumns e se você deseja que a repetição seja vertical ou horizontal.

    Se tiver mesmo que usar o Repeater você pode fazer um quebra dentro do seu <itemTemplate> usando html mesmo, tipo com um </br> ou <p> por exemplo.

    Se fugi do assunto me avisa. Abraço :)

     

    quinta-feira, 13 de outubro de 2011 11:18
  • Olá posta seu code
    Não esqueça de usar o componente </> na barra para posta seu código. Microsoft MCPD,MCTS,MCC
    quinta-feira, 13 de outubro de 2011 11:23
    Moderador
  • Bom é exatamente isto que você escreveu quero que fique lateralmente com uma quantidade fixa.

    Não tem como eu mudar meu codigo para DataList pois estou a pouco tempo na empresa e eles querem utilizar repeater, sera que tem como eu fazer desta forma.

    Exemplo:

    quero que o repeater execute tres vezes na vertical depois quebre para a segunda div do laudo e execute mais tres vezes e assim sucetivamente.

     

    Sera que tem Como ?

     

    Att:

    Cleiton Novais

    quinta-feira, 13 de outubro de 2011 11:36
  • Entendo, bom é possível sim fazer mas não tão fácil como no DataList, vamos ter que brincar um pouco com o espaçamento da página para chegar ao resultado:

    Fiz um teste aqui para exemplificar, digamos que eu tenha o seguinte ASPX:

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ListaErros.aspx.cs" Inherits="JQTest.ListaErros" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="estilo.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server" >
    
          <div style="width:800px;">    <br/>        <asp:Repeater ID="Repeater1" runat="server" 
            onitemdatabound="Repeater1_ItemDataBound">
            <HeaderTemplate>
                
            </HeaderTemplate>
            <ItemTemplate>
                <div id="blocoBase" runat="server" style="float:left; padding:0 5px 5px 0; color:#3D3D3D; width:164px; height:160px; ">
                    <div style="float:left; padding:6px 50px 0 15px;">
                        <img class="imgStatus" alt="Exceção não verificada" src="<%# DataBinder.Eval(Container.DataItem, "status") %>"/>
                    </div>
                    <div id="tituloSistemaEX">
                        <%# DataBinder.Eval(Container.DataItem, "nomeSistema") %>
                    </div>
                    <div id="usuarioClienteEX">
                        Usuário: <%# DataBinder.Eval(Container.DataItem, "usuarioCliente") %>
                    </div>
                    <div id="bodyEX">
                        <div class="divCampoExcecao" style="height:32px;">
                            <span class="textoSmallBold">
                                Tipo: <span title="<%# DataBinder.Eval(Container.DataItem, "tipoExcecao") %>" class="textoSmall"><%# DataBinder.Eval(Container.DataItem, "tipoExcecao") %></span>
                            </span>
                        </div>
                        <div class="divCampoExcecao" style="height:60px;">
                            <span class="textoSmallBold">
                                Descrição: <span class="textoSmall"><%# DataBinder.Eval(Container.DataItem, "descricaoExcecao") %></span>
                            </span>
                        </div>
                    </div>
                    <div id="divDataEX">
                    <a id="detalhes" href="<%# "DetalhesErro?ID=" + DataBinder.Eval(Container.DataItem, "idExcecao") %>">Detalhes</a><span id="dataEX"><%# DataBinder.Eval(Container.DataItem, "dataExcecao") %></span></div>
                </div>
            </ItemTemplate>
            <FooterTemplate>        
            </FooterTemplate>
            </asp:Repeater>
          </div><br/>    </form>
    </body>
    </html>
    
    

     


    Este código gera a seguinte imagem:

    Ou seja, temos 4 colunas, mas se eu quiser apenas 3 colunas, como devo fazer? Veja que o div antes do Repeater tem um tamanho fixo:

     

    <div style="width:800px;">    
    

    E veja que meu div dentro do ItemTemplate "blocoBase" possui no style a propriedade "float:left;", que fará com que cada bloco gerado, cada item do repeater, fique alinhado à esquerda, ou seja, todos os blocos forçarão para o lado esquerdo.

     

    <div id="blocoBase" runat="server" style="float:left; padding:0 5px 5px 0; color:#3D3D3D; width:164px; height:160px; ">
    

     


    Feito isso, para mudarmos o número de colunas, basta mudarmos o tamanho do espaço que os blocos possuem para se distribuir, é só mudar o width do div onde o Repeater está. Mudando o width para 600px veja o que acontece:

     

    Agora temos as 3 colunas.

    Qual o problema desta abordagem? Este é um caso simples, foi fácil ajustar, mas pode ter situações onde o formato das informações dentro do ItemTemplate pode dificultar o ajuste de espaçamento, se o tamanho da tela onde as informações estão sendo visualizadas variar muito pode causar imprevistos no layout, tudo vai depender de como esta estruturado seu HTML e CSS. Portanto, faça testes em browsers diferentes com tamanhos de tela diferentes.

    Espero ter respondido. Abraços :)

     


    quinta-feira, 13 de outubro de 2011 12:28
  • Desculpa ai galera a demora da resposta, Rodrigo Reis fiquei tão empolgado que ate esqueci que tinha postado uma pergunta no forum, cara este exemplo é perfeito na minha ocasião, valeu mesmo reapter é linha a linha porém com div da para fazer esta brincadeira valeu.

     

    Att:

    Cleiton Novais

    sexta-feira, 21 de outubro de 2011 12:34
  • tranquilo. que bom que foi útil! :)
    sexta-feira, 21 de outubro de 2011 13:30