Color the rows of JSF datatable is not working

Question

This is the Java code

@ManagedBean
public class DatatableBean {

    private List<Employee> emplList = new ArrayList<Employee>();


    public DatatableBean(){
        emplList.add(new Employee("Jack", 1, "Engineer"));
        emplList.add(new Employee("Jim", 2, "Engineer"));
        emplList.add(new Employee("Kelly", 3, "Manager"));
    }

    public List<Employee> getEmplList() {
        return emplList;
    }

    public void setEmplList(List<Employee> emplList) {
        this.emplList = emplList;
    }

}

This is the XHTML code

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"> 

<h:head><title>JSF datatable demo</title>

<style>
    .employee {
    font: verdana;
    background:green;
    }
    .manager {
    font: arial;
    background:blue;
    }
    .default {
    font: helvetica;
    background:red;
    }
</style>

</h:head> 
<body> 
<h:dataTable rowClasses="#{empl.designation  eq 'Manager' ? 'manager' : empl.designation eq 'Engineer' ? 'employee' : 'default'}"
    <h:column>
        <f:facet name="header">
            <h:outputText value="Id" />
        </f:facet>
        <h:outputText value="#{empl.id}" />
    </h:column>

    <h:column>
        <f:facet name="header">
            <h:outputText value="Name" />
        </f:facet>
        <h:outputText value="#{empl.name}" />
    </h:column>
    <h:column>
        <f:facet name="header">
            <h:outputText value="Designation" />
        </f:facet>
        <h:outputText value="#{empl.designation}" />
    </h:column>

</h:dataTable>
</body> 
</html>

I followed this answer

Color the rows of datatable based a condition in JSF 2

and wrote the above code. But only the default css is rendered in the browser for all rows.

Even if I change 'eq' to '==', the output remains the same.

This is the code rendered in the browser

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>JSF datatable demo</title>

<style>
    .employee {
    font: verdana;
    background:green;
    }
    .manager {
    font: arial;
    background:blue;
    }
    .default {
    font: helvetica;
    background:red;
    }
</style></head> 
<body><table>
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Designation</th>
</tr>
</thead>
<tbody>
<tr class="default">
<td>1</td>
<td>Jack</td>
<td>Engineer</td>
</tr>
<tr class="default">
<td>2</td>
<td>Jim</td>
<td>Engineer</td>
</tr>
<tr class="default">
<td>3</td>
<td>Kelly</td>
<td>Manager</td>
</tr>
</tbody>
</table>

</body> 
</html>

Please help

Thanks in advance

Try just `empl.designation` in rowclasses and see if it prints the right value — anpsmn, Dec 14 '14 at 07:02
Possible duplicate of [Changing h:datatable cell color or style dynamically in JSF](https://stackoverflow.com/questions/11038769/changing-hdatatable-cell-color-or-style-dynamically-in-jsf) — Kukeltje, Jan 23 '19 at 01:20

score 0 · Accepted Answer · edited May 23 '17 at 11:58

This answer works fine

JSF: Changing datatable cell color dynamically

I am not sure why I am unable to use the var attribute value in the rowClasses attribute

Updated code

XHTML code

<h:outputText value="#{datatableBean.rowClass}" />
<h:dataTable 
value="#{datatableBean.emplList}" var="empl" rowClasses="#{datatableBean.rowClass}" >
    <h:column>
        <f:facet name="header">
            <h:outputText value="Id" />
        </f:facet>
        <h:outputText value="#{empl.id}" />
    </h:column>

    <h:column>
        <f:facet name="header">
            <h:outputText value="Name" />
        </f:facet>
        <h:outputText value="#{empl.name}" />
    </h:column>
    <h:column>
        <f:facet name="header">
            <h:outputText value="Designation" />
        </f:facet>
        <h:outputText value="#{empl.designation}" />
    </h:column>

</h:dataTable>

and this is the Java code (added this method with the above Java code)

public String getRowClass() {
    StringBuilder rowClasses = new StringBuilder();

    for (Employee employee : emplList) {
        if (rowClasses.length() > 0) rowClasses.append(",");
        if(employee.getDesignation().equalsIgnoreCase("Engineer")) {
             rowClasses.append("employee");
        } else if(employee.getDesignation().equalsIgnoreCase("Manager")) {
            rowClasses.append("manager");
        }

    }
    return rowClasses.toString();
}

and the output works as expected.

Thanks!

Color the rows of JSF datatable is not working

1 Answers1