22 September 2014

Color ADF table column based on condition

Hi All,

Today we will see how you can color the table column based on some condition.

so suppose you have a ADF table based on employees table. Now you want to color the EmployeeId
column for those employee whose DepartmentId is 30.


Now when you go to page source of your jspx/jsff page then you will see the following code for EmployeeId column.

 <af:column sortProperty="EmployeeId" filterable="true" sortable="true"
                     headerText="#{bindings.EmployeesVO1.hints.EmployeeId.label}"
                     id="c8">
            <af:outputText value="#{row.EmployeeId}" id="ot7">
              <af:convertNumber groupingUsed="false"
                                pattern="#{bindings.EmployeesVO1.hints.EmployeeId.format}"/>
            </af:outputText>
  </af:column>


You have to use inlineStyle property of the column and then modify the above code as follows:

 <af:column sortProperty="EmployeeId" filterable="true" sortable="true"
                     headerText="#{bindings.EmployeesVO1.hints.EmployeeId.label}"
                     id="c8"
                     inlineStyle="background-color:#{row.DepartmentId eq '30' ? 'green' : 'red'}">
            <af:outputText value="#{row.EmployeeId}" id="ot7">
              <af:convertNumber groupingUsed="false"
                                pattern="#{bindings.EmployeesVO1.hints.EmployeeId.format}"/>
            </af:outputText>
          </af:column>


Now when you run the jspx page you can see that the EmployeeId column whose DepartmentId is 30 are colored with green else colored with red as shown below.




Happy Coding :)

1 comment:

  1. alternate colors to dept id.
    is that possible

    ReplyDelete