1 Reply Latest reply on Jan 25, 2011 5:10 AM by ilya40umov

    display rows or columns in different color based on a condition

    techbrainless

      Hi All,

       

      I am writing a small jsf page to list the students names with their grades , using rich databale

       

       

      <rich:dataTable binding="#{studentsListBean.table}" align="center"

                  id="students" rows="10" value="#{studentListBean.students}" var="student">

       

       

                          <rich:column sortBy="#{student.studentFullName}">

                              <f:facet name="header">

                                  <h:outputText value="Student Full Name" />

                              </f:facet>

                              <h:outputText value="#{student.studentFullName}" />

                          </rich:column>

       

                          <rich:column sortBy="#{student.grade}">

                              <f:facet name="header">

                                  <h:outputText value="Grade" />

                              </f:facet>

                              <h:outputText value="#{student.grade}" />

                          </rich:column>

      </rich:dataTable>

       

       

       

      what i need is to display the only grade of student with "A Grade" in blue color and other grades("B Grade","C Grade") in different color

        • 1. display rows or columns in different color based on a condition
          ilya40umov

          There are two options for you which I know:

          1) Use rowClasses attribute of rich:dataTable

          rowClassesfalsefalsejavax.el.ValueExpression
          (must evaluate to java.lang.String)
          Comma-delimited list of CSS style classes that will be applied to the rows of this table. A space separated list of classes may also be specified for any individual row. Thes styles are applied, in turn, to each row in the table. For example, if the list has two elements, the first style class in the list is applied to the first row, the second to the second row, the first to the third row, the second to the fourth row, etc. In other words, we keep iterating through the list until we reach the end, and then we start at the beginning again.

          2) Use styleClass attribute of rich:column where you can use EL expression like #{student.grade == 'A Grade' ? 'css1' : 'css2'}

          styleClassfalsefalsejavax.el.ValueExpression
          (must evaluate to java.lang.String)
          Assigns one or more CSS class names to the component. Corresponds to the HTML "class" attribute.