Is it possible to make pagination, having elements listed with forEach in a Toggleable Panel

Question

I would like to have 10 agencies per page, where every single one is in a Toogleable Panel.

The code of my page up to moment is:

    <c:forEach items="#{agencyBean.agencyList}" var="agency">

        <p:fieldset legend="${agency.tUser.name}" toggleable="true"
            toggleSpeed="500">
            <p:ajax event="toggle" listener="#{fieldsetBean.handleToggle}"
                update="growl" />

            <h:panelGrid columns="2" cellpadding="3" cellspacing="1">
                <p:graphicImage value="#{agencyBean.image}">
                    <f:param name="agencyId" value="#{agency.tUser.id}" />
                </p:graphicImage>
                <h:panelGrid columns="2" cellpadding="3" cellspacing="1" border="1">
                    Name: <h:outputText value="${agency.tUser.name}" /> 
                    Phone:<h:outputText value="${agency.tUser.phone}" /> 
                </h:panelGrid>
            </h:panelGrid>
        </p:fieldset>
    </c:forEach>

But all object from database are listed and it is not user friendly. Can you advice me how to split them on different pages? Thanks in advance!

Answer 1

did you try p:dataGrid?

<p:dataGrid var="agency" value="#{agencyBean.agencyList}" columns="1" rows="10" paginator="true">
    <p:fieldset legend="${agency.tUser.name}" toggleable="true" toggleSpeed="500">
        <p:ajax event="toggle" listener="#{fieldsetBean.handleToggle}" update="growl"/>

        <h:panelGrid columns="2" cellpadding="3" cellspacing="1">
            <p:graphicImage value="#{agencyBean.image}">
                <f:param name="agencyId" value="#{agency.tUser.id}"/>
            </p:graphicImage>
            <h:panelGrid columns="2" cellpadding="3" cellspacing="1" border="1">
                Name: <h:outputText value="${agency.tUser.name}"/>
                Phone:<h:outputText value="${agency.tUser.phone}"/>
            </h:panelGrid>
        </h:panelGrid>
    </p:fieldset>
</p:dataGrid>