Search code examples
jsfprimefaceselrowcount

JSF custsom DIV class to be displayed

I have this html list code:

<div class="destination-places-grid">
  Item 1
</div>

<div class="destination-places-grids">
  Item 2
</div>

<div class="destination-places-grids last-d-grid">
  Item 3
</div>

<div class="destination-places-grid">
  Item 4
</div>

<div class="destination-places-grids">
  Item 5
</div>

<div class="destination-places-grids last-d-grid">
  Item 6
</div>

As you can see, every 3 items, the class of div needs to change, I want to know the more elegant way to put this to a list in JSF 2, I have tried with p:dataList and output text with the rendered property dont accept <,>," or', so by writing their html equivalents like < ,etc... makes the code a little unreadable like you can see bellow (not the actual working code, but you get the idea of the approach)

 <p:dataList value="#{destinationController.destinationList}" rowIndexVar="row"
                var="destination" type="ordered"  >


 <h:outputText value="#{((row+1) mod 3) == 0 ? &lt;div class=&quot;destination-places-grid last-d-grid&quot;&gt; : &lt;div class=&quot;destination-places-grid&quot;#&apos;;&quot;&gt;'}"/>

<p:dataList >

What should be the right approach here?

Solution

  • Hope this is what you want:

    <p:dataList ............
            rowIndexVar="row" 
            itemStyleClass="#{((row+1) mod 3) eq 0 ? 'destination-places-grids last-d-grid', 'destination-places-grids' }" />

    ... content

</p:dataList/>