How to conditionally style a row in a rich:dataTable

Question

How can I change the style of a particular row based on a condition? I can use JSF EL in rich:column style class attribute, but I have to write for each column. I want to change the entire row.

Thanks

Answer 1

You can use the dataTables columnClasses and rowClasses properties.

That way you can produce the result which is shown here

Answer 2

I do as you've already mentioned and put the style on the column.

However you could always try wrapping all of your columns in a <rich:columnGroup> which is supposed to output a <tr> and place your conditional style on that.

EDIT: (in response to comment): if the header facets in your columns are being broken then you can separate them into a column group as well. Should work - you may not even need the column group in the header??

Eg.

<rich:dataTable>
  <f:facet name="header">
    <rich:columnGroup>
      <rich:column>Header 1</rich:column>
      <rich:column>Header 1</rich:column>
    </rich:columnGroup>
  </f:facet>
  <rich:columnGroup>
    <rich:column>Data</rich:column>
    <rich:column>Data</rich:column>
  </rich:columnGroup>
</rich:dataTable>

Answer 3

I've done an hybrid solution with Javascript.

<rich:column styleClass="expired" rendered="#{documento.expired}">
<f:facet name="header">
Da evadere entro
</f:facet>      
<h:outputText value="#{documento.timeAgoInWords}" />
</rich:column>

and then in Javascript (with Prototype which is included in Richfaces)

<script type="text/javascript">   
  function colorize() {    
    $$('td.expired').each(function(el) {
      el.up().addClassName('expired');   
    });
  }

  Event.observe(window, 'load', function() {
    colorize();
  });
</script>

edit:

this add a conditional css class with rendered:

<rich:column styleClass="expired" rendered="#{documento.expired}">

with javascript I loop on every td with css class expired $$('td.expired') and add the same css class to the upper node tr with el.up().

Event.observe(window, 'load', function() {});

this simply runs the function when the DOM is fully loaded.

Answer 4

Specifically for each column:

<rich:column styleClass="#{someBean.isSomething ? 'styleIfTrue' : 'styleIfFalse' }">