jsf2 ui:repeat alternate row color

1
votes

Using varStatus of ui:repeat is helpful to identify the odd and even rows if I display all the records in the list that is mapped to ui:repeat.

However, how do I handle a situation if I choose to display only specific records in the arraylist mapped to ui:repeat ? i.e. say for example that I display a table of students who have only scored more than 75% but my list that is mapped to ui:repeat contains the entire list of students. In this case, alternate row coloring does not work as some times consecutive rows have the same row color assigned to them. Is there an efficient workaround for this ?

Is there a similar feature like rowClasses that h:dataTable uses for ui:repeat?

2
jsf-2uirepeat

2 Answers

2
votes

You can do this by using css condition:

        <style type="text/css">
            .test1{
                display:none;
            }
            .test2{
                display:block;
            }
        </style>
        <ui:repeat value="#{tabview.students}" var="dt">
            <div class="#{(dt.scored  gt 75) ?'test1':'test2'}">#{dt.model}</div>
        </ui:repeat>
2
votes

For the Odd/Even, you can use the varStatus

<ui:repeat var="item" value="#{myBean.myList}" varStatus="status">
    <div class="some-class ${status.even ? 'row-even' : 'row-odd'}"> ... </div>
</ui:repeat>

CSS

.row-even {
  background-color: floralwhite;
}

.row-odd {
  background-color: gainsboro;
}