Surface conditional logic inside <p: ​​dataGrid>

Question

I have a data table that has two images per column, one that is displayed, and a hidden image that does not. The idea is to display a hidden image on top of another image if the attribute set # {person.isLocked} is set to "T". My code has a div and inside that div has two divs, one for the main image, and then one for the image to be overlaid. (Code below). The image to be overlaid has a style attribute display: none ;, I need to somehow check if # {person.isLocked} matches the value "T", if so, I need to change the css to display: block; otherwise leave it.

<p:dataGrid var="person" value="myBean.people">
    <p:column>
        <h:panelGird style="margin-left:auto; margin-right:auto;">
           <div>
              <div style="position:absolute; z-index:1;">
                   <p:graphicImage value="image?id=#{person.id}" cache="false"/>
              </div>
              <div style="position:absolute; z-index:100; display: none;">
                   <p:graphicImage value="./images/lock.png" cache="true"/>
              </div>
           </div>
        </h:panelGrad>
    </p:column>
</p:dataGrid>

, , "T" "F" , # {person.isLocked}, css, "block" "none", person .

     <div style="position:absolute: z-index:100; display: #{person.isLocked}">
         <p:graphicImage value="./images/lock.png" cache="true"/>
     </div>

. . - ?

Answer 1

Primefaces,

<ui:fragment rendered="#{person.isLocked}">
 <!-- your div here -->
</ui fragment>