How to conditionally style a row in a rich:dataTable

How to conditionally style a row in a rich:dataTable

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.


Horizontal placement of components in JSF


What will be better view with JSF technology
I do as you've already mentioned and put the style on the column..
How to validate datatable in JSF
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..
After rich:extendedDataTable sortby, other actions are not getting executed
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.

jsf immediate=“true” regarding binding to session bean
Should work - you may not even need the column group in the header??.
HIt counter in JSF
User activation problem in JSF by providing a link to user?
<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> 

JSF web application with ICEfaces component


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


This is my code, there is a checkbox on each row, if a checkbox is selected, the row is highlighted:.
<rich:dataTable value="#{manageOutstandingApprovals.approvalsResults}" var="approvals" styleClass="wp100 mtb20"  sortMode="single" id="approvalsTable"               enableContextMenu="false" selectionMode="none" reRender="actions" rows="10">          <rich:column styleClass="#{approvals.rowcolor}" width="5%" sortBy="#{approvals.documentType}" sortOrder="#{manageOutstandingApprovals.documentTypeSort}">           <f:facet name="header">             <h:outputText value="#{messages['outstandingApprovals.documentType']}"/>           </f:facet>           <h:outputText  value="#{messages[approvals.documentType]}" id="col1"/>         </rich:column>          <rich:column styleClass="#{approvals.rowcolor}" width="5%" sortBy="#{approvals.documentID}" sortOrder="#{manageOutstandingApprovals.documentIDSort}">           <f:facet name="header">             <h:outputText value="#{messages['outstandingApprovals.documentID']}"/>           </f:facet>           <h:outputText value="#{approvals.documentID}" id="col2"/>         </rich:column>          <rich:column styleClass="#{approvals.rowcolor}" width="10%" sortBy="#{approvals.dateSubmitted}" sortOrder="#{manageOutstandingApprovals.dateSubmittedSort}">           <f:facet name="header">             <h:outputText value="#{messages['outstandingApprovals.dateSubmitted']}"/>           </f:facet>           <h:outputText value="#{approvals.dateSubmitted}" id="col3"/>         </rich:column>          <rich:column styleClass="#{approvals.rowcolor}" width="15%" sortBy="#{approvals.submittedBy}" sortOrder="#{manageOutstandingApprovals.submittedBySort}">           <f:facet name="header">             <h:outputText value="#{messages['outstandingApprovals.submittedBy']}"/>           </f:facet>           <h:outputText value="#{approvals.submittedBy}"  id="col4"/>         </rich:column>          <rich:column styleClass="#{approvals.rowcolor}" width="20%" sortBy="#{approvals.orgName}" sortOrder="#{manageOutstandingApprovals.organizationSort}">           <f:facet name="header">             <h:outputText value="#{messages['outstandingApprovals.userOrg']}"/>           </f:facet>           <h:outputText value="#{approvals.orgName}"  id="col5"/>         </rich:column>          <rich:column styleClass="#{approvals.rowcolor}" width="5%" sortBy="#{approvals.value}" sortOrder="#{manageOutstandingApprovals.valueSort}">           <f:facet name="header">             <h:outputText value="#{messages['outstandingApprovals.value']}"/>           </f:facet>           <h:outputText value="#{approvals.value}"  id="col6"/>         </rich:column>          <rich:column styleClass="#{approvals.rowcolor}" width="20%" sortBy="#{approvals.approverUserName}" sortOrder="#{manageOutstandingApprovals.approverSort}">           <f:facet name="header">             <h:outputText value="#{messages['outstandingApprovals.approver']}"/>           </f:facet>           <h:outputText value="#{approvals.approverUserName}" id="col7"/>         </rich:column>          <rich:column styleClass="#{approvals.rowcolor}" width="15%" sortBy="#{approvals.dateAssigned}" sortOrder="#{manageOutstandingApprovals.assignedSort}">           <f:facet name="header">             <h:outputText value="#{messages['outstandingApprovals.assigned']}"/>           </f:facet>           <h:outputText value="#{approvals.dateAssigned}"  id="col8"/>         </rich:column>          <rich:column styleClass="#{approvals.rowcolor}" width="5%" sortBy="#{approvals.dateOutstanding}"  sortOrder="#{manageOutstandingApprovals.numOutstandingSort}">           <f:facet name="header">             <h:outputText value="#{messages['outstandingApprovals.daysOutstanding']}"/>           </f:facet>           <h:outputText value="#{approvals.dateOutstanding}"  id="col9"/>         </rich:column>          <rich:column styleClass="#{approvals.rowcolor}">           <f:facet name="header">             <h:outputText value="#{messages['outstandingApprovals.selectButton']}" title="#{messages['outstandingApprovals.selectButtonTitle']}"/>           </f:facet>           <h:selectBooleanCheckbox class="chkbx" value="#{approvals.selected}" id="selectBox" title="#{messages['outstandingApprovals.selectButtonTitle']}">             <a:support event="onclick" ajaxSingle="true" reRender="approvalsTable" />            </h:selectBooleanCheckbox>         </rich:column>       </rich:dataTable> 
In my backing bean:.
public String getRowcolor() {     if (selected) // selected is a variable whose value is from the checkBox           return "row-highlight-color"; // css id     else         return "row-white-color"; // css id     } 


Use rowClasses ...

You can set a nice zebra style for example, and set a particular color when your value is set to what you want :. Here an example where my value is a boolean.

(rowkey is the index of each row, you have to set it as this in rich:datatable :.
rowKeyVar="rowkey". rowClasses="#{myBean.is_validValue == false ? (rowkey mod 2 == 0 ? 'order-table-even-row' : 'order-table-odd-row') : 'found'}".
I set Found class style when ma value == true.. CSS:.
.found { background-color: #FACC2E; }    .order-table-even-row { background-color: #FCFFFE; }  .order-table-odd-row { background-color: #ECF3FE; } 


You can use the dataTables columnClasses and rowClasses properties.

. That way you can produce the result which is shown here.


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..


When using h:datatable, create a bean method and call this to determine the style.

Perhaps this could also be done for a rich:datatable?.
     public String getStyleSelectedOrderRows() {         StringBuilder sb = new StringBuilder();         String[] oddEven = new String[]{"oddRow,", "evenRow,"};         int i = 0;         for (MyObject object: myObjectList) {             sb.append(object.isSelected() ? "selected," : oddEven[i++ % 2]);         }         return sb.toString();     }
. and in the .xhtml: .
 <h:dataTable rowClasses="#{bean.styleSelectedOrderRows}"

77 out of 100 based on 67 user ratings 617 reviews