6 Replies Latest reply on Feb 6, 2009 7:38 PM by tsurdilovic

    rich:dataTable row color?

      Hello, I have a rich:dataTable and I would like to change the row color based on one of the values in each row.

      The table is a list of items, and each item has a field called "Status". I would like to be able to change the color of the row based on the contents of that field.

      Is this possible?

        • 1. Re: rich:dataTable row color?
          maksimu

          DataTable has attributes like onRowMouseOver, onRowMouseOut. Try them out.

          • 2. Re: rich:dataTable row color?

            I think I figured it out. I just add the following code to each of the columns:

            styleClass="#{dataTableItem.status}"


            Then in my css I have this code for each status:

            .Proposed{
             background-color:fuchsia;
            }


            Works well, but needs to be applied to each column.

            • 3. Re: rich:dataTable row color?
              maksimu

              But how do you change color when you mouseover that row/cell?

              • 4. Re: rich:dataTable row color?
                ilya_shaikovsky

                look to richfaces-demo online. there source code for such highlighting. dataTable sample.

                • 5. Re: rich:dataTable row color?
                  maksimu

                  How about changing the color of the row with different expressions. For example if i have a list of cars and if the color of a car is RED the row should be red and if the car is blue the color should be blue.. Is it possible?

                  • 6. Re: rich:dataTable row color?
                    tsurdilovic

                    You could add onmouseover and onmouseout on each of your <rich:column> components, for example:

                    
                    <rich:column onmouseover="this.style.backgroundColor='#{car.hexColor}'"
                     onmouseout="this.style.backgroundColor=''">
                     <h:outputText value="#{car.make}" />
                     </rich:column>
                     <rich:column onmouseover="this.style.backgroundColor='#{car.hexColor}'"
                     onmouseout="this.style.backgroundColor=''">
                     <h:outputText value="#{car.model}" />
                     </rich:column>
                     <rich:column onmouseover="this.style.backgroundColor='#{car.hexColor}'"
                     onmouseout="this.style.backgroundColor=''">
                     <h:outputText value="#{car.color}" />
                     </rich:column>