CODEWITHSUNDEEP
jsf-2uirepeat
user2228591
user2228591

Reputation: 115

jsf2 ui:repeat alternate row color

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?

Upvotes: 1

Views: 2436

Answers (2)

Mircea Stanciu
Mircea Stanciu

Reputation: 3753

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;
}

Upvotes: 2

Rong Nguyen
Rong Nguyen

Reputation: 4189

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>

Upvotes: 2

Related Questions