Problem with a h:panelGrid and a ui:repeat

[Julien Martin]

Hello,
I am trying to use a h:panelgrid with a ui:repeat.
I would like for my h:panelgrid to show lines of three of the h:panelgroups that are inside the ui:repeat and end with the "hard coded" h:panelgroup. However, the h:panelgrid treats the ui:repeat as only one component. End result I have two components in my h:panelgrid!!
Can anyone please help?
Thanks,
Julien.

Here is the code:

<h:panelGrid columns="3" rowClasses="dg-row" styleClass="datagrid-galerie" >
                        <ui:repeat value="#{galerieView.sculptures}" var="sculpture">
                            <h:panelGroup><!--here-->
                                <p>
                                    <pretty:link mappingId="sculptureAction" styleClass="miniature-link">
                                        <f:param value="#{view.locale.language}"/>
                                        <f:param value="#{jbm:normaliserURL(sculpture.sculpturei18nMap[view.locale.language].titre)}" />
                                        <f:param value="#{sculpture.sculptureID}" />
                                        <h:graphicImage value="#{initParam['com.jeanbaptistemartin.static.url']}/#{sculpture.photoMiniature}" styleClass="miniature-image" alt="#{sculpture.sculpturei18nMap[view.locale.language].titre}, #{sculpture.sculpturei18nMap[view.locale.language].matiere}, #{jbm:renvoyerAnnee(sculpture.annee)}."/>
                                    </pretty:link>
                                </p>

                            </h:panelGroup>
                        </ui:repeat>
                        <h:panelGroup><!--and there-->
                            toto
                        </h:panelGroup>
                    </h:panelGrid>

[Cesar Loachamin]

Hi Julien

You're right the panelGrid treats the ui:repeat like a one component, and do it for every component, the panelGrid is rendered as a table, maybe you can construct your table without the panel grid, I give you an example
<table> <ui:repeat value="#{galerieView.sculptures}" var="sculpture"> <tr> <td> <p><pretty:link mappingId="sculptureAction" styleClass="miniature-link"> <f:param value="#{view.locale.language}"/> <f:param value="#{jbm:normaliserURL(sculpture.sculpturei18nMap[view.locale.language].titre)}" /> <f:param value="#{sculpture.sculptureID}" /> <h:graphicImage value="#{initParam['com.jeanbaptistemartin.static.url']}/#{sculpture.photoMiniature}" styleClass="miniature-image" alt="#{sculpture.sculpturei18nMap[view.locale.language].titre}, #{sculpture.sculpturei18nMap[view.locale.language].matiere}, #{jbm:renvoyerAnnee(sculpture.annee)}."/> </pretty:link></p> </td> </tr> </ui:repeat> <tr> <td> <h:panelGroup><!--and there--> toto </h:panelGroup> </td> </tr> </table>
I hope this can give you a clue how to solve your problem.
Regards
Cesar

[Julien Martin]

Thanks a lot Cesar,
However you'll notice that I won't get exactly what I want to achieve: with the proposed solution, I get one item per row whereas I would like 3 items per row...
I just hoped there was some way of circumventing the problem you described still using a h:datagrid...
Thanks anyway for taking the time to answer
Julien.

[Cesar Loachamin]

Hi Julien

I didn't understood your question very well, mmm It's difficult to resolve, but make it work, it's a weird solution but It works for me, try it.
<table> <ui:repeat value="#{galerieView.sculptures}" var="sculpture" varStatus="status"> <h:panelGroup rendered="#{status.index mod 3 eq 0}"> <tr></tr> </h:panelGroup> <td> <p><pretty:link mappingId="sculptureAction" styleClass="miniature-link"> <f:param value="#{view.locale.language}"/> <f:param value="#{jbm:normaliserURL(sculpture.sculpturei18nMap[view.locale.language].titre)}" /> <f:param value="#{sculpture.sculptureID}" /> <h:graphicImage value="#{initParam['com.jeanbaptistemartin.static.url']}/#{sculpture.photoMiniature}" styleClass="miniature-image" alt="#{sculpture.sculpturei18nMap[view.locale.language].titre}, #{sculpture.sculpturei18nMap[view.locale.language].matiere}, #{jbm:renvoyerAnnee(sculpture.annee)}."/> </pretty:link></p> </td> </ui:repeat> <tr> <td> <h:panelGroup><!--and there--> toto </h:panelGroup> </td> </tr> </table>
Regards
Cesar

[Julien Martin]

I'll try that. Thanks Cesar.

[Cesar Loachamin]

Hi Julien

I was thinking how to improve the code that I post, I find a perfect solution for this, this code enclose perfectly the <td> between the <tr>. Use this:
<table> <tr> <!-- added --> <ui:repeat value="#{galerieView.sculptures}" var="sculpture" varStatus="status"> <td> <p><pretty:link mappingId="sculptureAction" styleClass="miniature-link"> <f:param value="#{view.locale.language}"/> <f:param value="#{jbm:normaliserURL(sculpture.sculpturei18nMap[view.locale.language].titre)}" /> <f:param value="#{sculpture.sculptureID}" /> <h:graphicImage value="#{initParam['com.jeanbaptistemartin.static.url']}/#{sculpture.photoMiniature}" styleClass="miniature-image" alt="#{sculpture.sculpturei18nMap[view.locale.language].titre}, #{sculpture.sculpturei18nMap[view.locale.language].matiere}, #{jbm:renvoyerAnnee(sculpture.annee)}."/> </pretty:link></p> </td> <h:outputText value="&lt;/tr&gt;&lt;tr&gt;" escape="false" rendered="#{(status.index + 1 ) mod 3 eq 0}"/><!-- here goes </tr><tr> --> </ui:repeat> </tr><!--added--> <tr> <td> <h:panelGroup><!--and there--> toto </h:panelGroup> </td> </tr> </table>
I think with this, it's properly corrected your problem.
Regards
Cesar

[Julien Martin]

Yes, the first part is perfect. However you see there is a problem with the last "hardcoded" h:panelgroup ("and there").
I would like it to follow directly the last "dynamic" element. Do you see my point?
Regards,
Julien.

[Cesar Loachamin]

Of course Julien I understand you, I solve this, so use it:
<table> <tr> <ui:repeat value="#{galerieView.sculptures}" var="sculpture" varStatus="status"> <td> <p><pretty:link mappingId="sculptureAction" styleClass="miniature-link"> <f:param value="#{view.locale.language}"/> <f:param value="#{jbm:normaliserURL(sculpture.sculpturei18nMap[view.locale.language].titre)}" /> <f:param value="#{sculpture.sculptureID}" /> <h:graphicImage value="#{initParam['com.jeanbaptistemartin.static.url']}/#{sculpture.photoMiniature}" styleClass="miniature-image" alt="#{sculpture.sculpturei18nMap[view.locale.language].titre}, #{sculpture.sculpturei18nMap[view.locale.language].matiere}, #{jbm:renvoyerAnnee(sculpture.annee)}."/> </pretty:link></p> </td> <h:outputText value="</tr><tr>" escape="false" rendered="#{(status.index + 1 ) mod 3 eq 0}"/> <h:panelGroup rendered="#{status.last}" > <td> <h:panelGroup><!--and there--> toto </h:panelGroup> </td> </h:panelGroup> </ui:repeat> </tr> </table>
So now, I hope this finally fix you problem.
Regards,
Cesar.

[Julien Martin]

thanks Cesar.