Rendering values based on other column’s values in primefaces datatable

jsf-2primefaces

I am displaying some values in datatable in primefaces.

here is the code.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <title>Custom Rendering Data Table Test</title>
    </h:head>
    <h:body>
        <p:layout fullPage="true">
            <p:layoutUnit position="center">
                <p:dataTable var="car" value="#{tableBean.mediumCarsModel}" selection="#{tableBean.selectedCar}" 
                id="carList" paginator="true" rows="10" editable="true">  

        <f:facet name="header">  
            In-Cell Editing  
        </f:facet>

        <p:column selectionMode="multiple" style="width:18px" />  

        <p:column headerText="User Name" style="width:100px">
        <p:graphicImage value="C:\raman\AMAP\POC\primefaces\JSF2.0HelloWorld\WebContent\images\rssLogo.gif"/>    
        <p:graphicImage value="C:\raman\AMAP\POC\primefaces\JSF2.0HelloWorld\WebContent\images\System.gif"/>    
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{car.username}" />  
                </f:facet>  
                <f:facet name="input">  
                    <p:inputText value="#{car.username}" style="width:100%"/>  
                </f:facet>  
            </p:cellEditor>  
        </p:column> 


        <p:column headerText="Model" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{car.model}" />  
                </f:facet>  
                <f:facet name="input">  
                    <p:inputText value="#{car.model}" style="width:100%"/>  
                </f:facet>  
            </p:cellEditor>  
        </p:column>  

        <p:column headerText="Year" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{car.year}" />  
                </f:facet>  
                <f:facet name="input">  
                    <p:inputText value="#{car.year}" style="width:100%" label="Year"/>  
                </f:facet>  
            </p:cellEditor>  
        </p:column>  

        <p:column headerText="Manufacturer" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{car.manufacturer}" />  
                </f:facet>  
                <f:facet name="input">  
                    <h:selectOneMenu value="#{car.manufacturer}" >  
                        <f:selectItems value="#{tableBean.manufacturers}"  
                            var="man"   
                            itemLabel="#{man}"  
                            itemValue="#{man}" />  
                    </h:selectOneMenu>  
                </f:facet>  
            </p:cellEditor>  
        </p:column>  

        <p:column headerText="Color" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{car.color}" />  
                </f:facet>  
                <f:facet name="input">  
                    <h:selectOneMenu value="#{car.color}" >  
                        <f:selectItems value="#{tableBean.colors}"  
                            var="color"   
                            itemLabel="#{color}"  
                            itemValue="#{color}" />  
                    </h:selectOneMenu>  
                </f:facet>  
            </p:cellEditor>  
        </p:column>  

        <p:column headerText="Options" style="width:100px">  
            <p:rowEditor />  
        </p:column>  

    </p:dataTable>  
            </p:layoutUnit>
        </p:layout>                        
    </h:body>
</html>

now, I have to read the value of year like if the year will be less than 1990 then i have to display rsslogo image if not then display System image.

Please let me know how to do this in primefaces… I am beginner in primefaces and still in learning phase….

Best Solution

Use conditional rendering:

<p:graphicImage value="path/to/your/image1" rendered="#{car.year lt 1990}/>
<p:graphicImage value="path/to/your/image2" rendered="#{car.year ge 1990}/>

Replace the content of the value attribute with the correct path (you should not use absolute pathes as shown in your question!!).

The keyword lt means "less than" and ge "greater or equal".

Related Question