9 Replies Latest reply on Jun 4, 2008 8:50 AM by leandro godoy

    Doubts with styles in (richDataTable)

    leandro godoy Apprentice


      how can define styles / colors for a particular line or cell of my (Rich: dataTable), and that qdo my request is for example cancelled want to add the line in red, but the request that are active in blue for example, there is a way to achieve this effect? How?
      abarços, thank you.

        • 1. Re: Doubts with styles in (richDataTable)
          Sergey Smirnov Master

          Use rich:columnGroup component and style or styleClass attribute there.

          • 2. Re: Doubts with styles in (richDataTable)
            leandro godoy Apprentice

            not understand friend, I need is that the style of a line is one, if my application is closed, that is another case he is open among other options, in case I have to check the status of my request and in accordance with this situation using a style in a row so in the same table can have 5 styles, a red line = request unsuccessful, another blue line = request closes, another gray line = request canceled, you would have naum an example so that I could better understand?
            Mto you for listening, hugging.

            • 3. Re: Doubts with styles in (richDataTable)
              Ilya Shaikovsky Master

               

              <rich:dataTable value="#{capitalsBean.capitals}" var="cap">
               <rich:columnGroup styleClass="#{cap.className}">
               <rich:column>
               <h:outputText value="#{cap.name}"/>
               </rich:column>
               </rich:columnGroup>
               </rich:dataTable>
              

              If this what you wants?

              • 4. Re: Doubts with styles in (richDataTable)
                leandro godoy Apprentice

                hello, my table this structured the way below, here already added (rich: columnGroup) for the columns but what happened and that my columns of data are displayed in a single column now, to use (rich: columnGroup)'ll have to change my structure of table?
                thank you for help, hugs.


                <rich:datascroller align="center" for="tbvenda"
                 maxPages="20" style=" width : 900px;" />
                 <rich:dataTable
                 onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
                 onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
                 cellpadding="0" cellspacing="0" rows="10" width="700" border="0"
                 var="vendas" value="#{pedido.model}" id="tbvenda"
                 style=" width : 736px;"
                 onRowDblClick="javascript:Richfaces.showModalPanel('frm:itens')">
                
                
                 <f:facet name="header">
                 <rich:columnGroup>
                 <rich:column rowspan="2">
                 <h:outputText value="#{msg.acoes}"></h:outputText>
                 <rich:separator height="12" styleClass="tooltip"></rich:separator>
                 <a4j:commandLink action="#{pedido.novo}" immediate="true"
                 id="novo">
                 <h:graphicImage value="/images/BOTOES/novo1.png" width="20"
                 height="20" styleClass="imagem">
                 </h:graphicImage>
                
                 </a4j:commandLink>
                 <rich:spacer width="13"></rich:spacer>
                 <a4j:commandLink action="#{pedido.getTodos}" immediate="true"
                 id="atualizar" reRender="tbvenda">
                 <h:graphicImage value="/images/BOTOES/Restart.png" width="20"
                 height="20" styleClass="imagem">
                
                 </h:graphicImage>
                 </a4j:commandLink>
                 </rich:column>
                
                 <rich:column colspan="6">
                 <h:outputText value="#{msg.pedidos}"></h:outputText>
                 </rich:column>
                
                 <rich:column rowspan="2">
                 <h:outputText value="#{msg.fecharped}"></h:outputText>
                 <rich:separator height="12" styleClass="tooltip"></rich:separator>
                
                 </rich:column>
                
                 <rich:column breakBefore="true">
                 <h:outputText value="#{msg.codigo}" />
                 </rich:column>
                
                 <rich:column>
                 <h:outputText value="#{msg.cliente}" />
                 </rich:column>
                
                 <rich:column>
                 <h:outputText value="#{msg.situacao}" />
                 </rich:column>
                
                 <rich:column>
                 <h:outputText value="#{msg.usuario}" />
                 </rich:column>
                
                 <rich:column>
                 <h:outputText value="#{msg.valortotal}" />
                 </rich:column>
                
                 <rich:column>
                 <h:outputText value="#{msg.data}" />
                 </rich:column>
                 </rich:columnGroup>
                
                 </f:facet>
                
                
                 <rich:columnGroup>
                 <rich:columnGroup>
                 <rich:column>
                 <center><a4j:commandLink action="#{pedido.editar}"
                 id="editar" rendered="#{vendas.situacao=='A'}">
                 <f:setPropertyActionListener target="#{pedido.id}"
                 value="#{vendas.pedidoid}" />
                 <a4j:support event="onclick" immediate="true"
                 reRender="pares,vtotal,tbitens"></a4j:support>
                 <h:graphicImage value="/images/BOTOES/edit.png" width="20"
                 height="20" styleClass="imagem">
                 </h:graphicImage>
                 </a4j:commandLink> <rich:spacer width="13" /> <h:panelGroup>
                 <a4j:commandLink
                 onclick="javascript:Richfaces.showModalPanel('frm:confimaExclusao')"
                 rendered="#{vendas.situacao=='A'}">
                 <f:setPropertyActionListener target="#{pedido.id}"
                 value="#{vendas.pedidoid}" />
                 <h:graphicImage value="/images/BOTOES/Trash2.png" width="20"
                 height="20" styleClass="imagem">
                 </h:graphicImage>
                 </a4j:commandLink>
                
                 <a4j:commandLink
                 onclick="javascript:Richfaces.showModalPanel('frm:cancelaPedido')"
                 rendered="#{vendas.situacao=='F'}"
                 oncomplete="javascript:Richfaces.hideModalPanel('frm:cancelaPedido')">
                 <f:setPropertyActionListener target="#{pedido.id}"
                 value="#{vendas.pedidoid}" />
                 <h:graphicImage value="/images/BOTOES/Cancelar.png" width="20"
                 height="20" styleClass="imagem">
                 </h:graphicImage>
                
                 </a4j:commandLink>
                 </h:panelGroup></center>
                 </rich:column>
                 </rich:columnGroup>
                
                
                
                 <rich:columnGroup>
                 <rich:column filterBy="#{vendas.pedidoid}" filterEvent="onkeyup"
                 sortBy="#{vendas.pedidoid}">
                 <f:facet name="header">
                 <h:outputText value="#{msg.pesq}"></h:outputText>
                 </f:facet>
                 <center><h:outputText value="#{vendas.pedidoid}"></h:outputText>
                 </center>
                 </rich:column>
                 </rich:columnGroup>
                
                 <rich:columnGroup>
                 <rich:column filterBy="#{vendas.cliente}" filterEvent="onkeyup"
                 sortBy="#{vendas.cliente}">
                 <f:facet name="header">
                 <h:outputText value=""></h:outputText>
                 </f:facet>
                 <center><h:outputText value="#{vendas.cliente}"></h:outputText>
                 </center>
                 </rich:column>
                 </rich:columnGroup>
                
                
                 <rich:columnGroup>
                 <rich:column filterBy="#{vendas.situacao}" filterEvent="onkeyup"
                 sortBy="#{vendas.situacao}">
                 <f:facet name="header">
                 <h:outputText value=""></h:outputText>
                 </f:facet>
                 <center><h:outputText value="#{vendas.situacao}">
                 </h:outputText></center>
                 </rich:column>
                 </rich:columnGroup>
                
                 <rich:columnGroup>
                 <rich:column filterBy="#{vendas.usuarioid}" filterEvent="onkeyup"
                 sortBy="#{vendas.usuarioid}">
                 <f:facet name="header">
                 <h:outputText value=""></h:outputText>
                 </f:facet>
                 <center><h:outputText value="#{vendas.usuarioid}"></h:outputText>
                 </center>
                 </rich:column>
                 </rich:columnGroup>
                
                 <rich:columnGroup>
                 <rich:column>
                 <center><h:outputText value="#{vendas.valortotal}"
                 styleClass="erro">
                 <f:convertNumber currencySymbol="#{local.currencSimbol}"
                 groupingUsed="#{true}" maxFractionDigits="2" type="currency"
                 locale="#{local.localeAtual}"></f:convertNumber>
                 </h:outputText></center>
                 </rich:column>
                 </rich:columnGroup>
                
                 <rich:columnGroup>
                 <rich:column filterBy="#{vendas.datavenda}" filterEvent="onkeyup"
                 sortBy="#{vendas.datavenda}">
                 <f:facet name="header">
                 <h:outputText value=""></h:outputText>
                 </f:facet>
                 <center><h:outputText value="#{vendas.datavenda}">
                 <f:convertDateTime dateStyle="medium"
                 locale="#{local.localeAtual}" pattern="dd/MM/yyyy"></f:convertDateTime>
                 </h:outputText></center>
                 </rich:column>
                 </rich:columnGroup>
                
                 <rich:columnGroup>
                 <rich:column>
                 <center><a4j:commandLink action="#{pedido.fechar}"
                 immediate="true" id="fecharped"
                 rendered="#{vendas.situacao=='A'and vendas.valortotal >0}"
                 reRender="tbvenda">
                 <f:setPropertyActionListener target="#{pedido.id}"
                 value="#{vendas.pedidoid}" />
                 <h:graphicImage value="/images/BOTOES/fecharpedido.png"
                 width="20" height="20">
                 </h:graphicImage>
                 </a4j:commandLink></center>
                 </rich:column>
                 </rich:columnGroup>
                 </rich:columnGroup>
                
                 </rich:dataTable>
                


                • 5. Re: Doubts with styles in (richDataTable)
                  Sergey Smirnov Master

                  columnGroup is a table row (ie. the same as < tr >)

                  Why you put so many columnGroup tag in your code?

                  • 6. Re: Doubts with styles in (richDataTable)
                    leandro godoy Apprentice

                    Yes, now fix the columns, but let me explain my doubt, what I want is to apply different styles to different lines of my table
                    Ex:
                    Code----Product---situation
                    1 ---- xxx-------- Active.............. situation where == Active color, the green line
                    1 ----- yyyy--------Inactive................. when the situation == Inactive color red line
                    1 ----- zzzzzz--------cancelled................ when the situation == Cancelled color blue line
                    1 produto1------Inactive..................... when the situation == Inactive color red line
                    1 produto1---- Inactive............. when the situation == Inactive color red line
                    1 produto1----- cancelled................. cancelled when the situation == Cancelled color blue line

                    then get on the table in color lines:
                    green
                    red
                    blue
                    red
                    red
                    blue

                    Is there a way to do this with (Rich: DataTable)?
                    now thank you for your attention, hugging

                    • 7. Re: Doubts with styles in (richDataTable)
                      leandro godoy Apprentice

                      then some friends know any way?

                      • 8. Re: Doubts with styles in (richDataTable)
                        Sergey Smirnov Master

                        Your question is already answered above.

                        • 9. Re: Doubts with styles in (richDataTable)
                          leandro godoy Apprentice

                          Here is the solution to my case!:

                          
                          <rich:column filterBy="#{vendas.pedidoid}" filterEvent="onkeyup"
                           sortBy="#{vendas.pedidoid}" >
                           <f:facet name="header">
                           <h:outputText value="#{msg.pesq}"></h:outputText>
                           </f:facet>
                           <center>
                           <h:outputText value="#{vendas.pedidoid}"
                           styleClass="#{vendas.situacao=='FECHADO'? 'fechado' : vendas.situacao=='CANCELADO'? 'erro':'aberto' }">
                           </h:outputText>
                           </center>
                           </rich:column>
                          
                          

                          Thanks to all who helped me with the above tips, hugs.