Render child component when parent component rendered property is false?

Question

I want to create a grid like this:

Element1 Element2 Element3

Element4 Element5 Element6

I have the following code:

<ui:repeat value=#{beans.myElementList} var="element" varStatus="i">
   <b:row rendered=#{i.index%3==0}>
      <b:column medium-screen="4">
         #{element.display}
      </b:column>
   </b:row>
</ui:repeat>

The result of my code:

Element1

Element4

How to solve this problem?

You cannot use 'rendered' like this... If you want to actually start a new row each three items you need a more creative solution. One of these: https://stackoverflow.com/questions/10481742/jsf-2-uirepeat-group-every-n-items-inside-a-div — Kukeltje, Sep 14 '17 at 06:35

Stephan Rauh · Answer 1 · 2017-09-15T20:38:36.973

<b:panelGrid> to the rescue:

<ui:repeat value=#{beans.myElementList} var="element">
   <b:panelGrid columns="3" size="md">
     #{element.display}
   </b:panelGrid>
</ui:repeat>

<b:panelGrid> is inspired by the standard <h:panelGrid>, which renders an HTML table. Similarly, <b:panelGrid> renders a table consisting of Bootstrap rows and columns. Simply put everything you want to display into the panel grid. BootsFaces automatically detects when to render a new row.

The use case I originally had in mind is a form. More often than not, such a form is a repetition of identical lines: label, input field, error message. <b:panelGrid> allows you to create tabular forms like this with minimal effort.

Also see the documentation of <b:panelGrid>.

Addition until BootsFaces 1.2.0 is released: Looking at the documentation, I wasn't happy what I saw. So I've corrected and updated it. Until BootsFaces 1.2.0 is released, also see the documentation of the developer showcase.

krokodilko · Accepted Answer · 2017-09-14T18:58:46.143

1

Try the below code.
The first ui:repeat renders <row> for each 3 elements,
the second one renders elements (within <column>) in groups of 3 elements each.

<ui:repeat value="#{beans.myElementList}" step="3" varStatus="i" >

    <b:row>
        <ui:repeat value="#{beans.myElementList}" var="element"
                   step="1" offset="#{i.index}" 
                   size="#{i.index + 3 le beans.myElementList.size() ? i.index + 3 : beans.myElementList.size() }"
                   varStatus="j" >
             <b:column medium-screen="4">
                 #{element.display}
             </b:column>        
        </ui:repeat>
    </b:row>

</ui:repeat>

edited Sep 14 '17 at 18:58

answered Sep 14 '17 at 18:50

krokodilko

35,300
7
55
79

So you agree it is (besides the `div`s being replacing by a `row` and `column`) a duplicate of https://stackoverflow.com/questions/10481742/jsf-2-uirepeat-group-every-n-items-inside-a-div? – Kukeltje Sep 14 '17 at 19:05

Render child component when parent component rendered property is false?

2 Answers2