jsfbootsfaces

How to build a dynamic grid and only show three columns in a row (JSF 2.2 and BootsFaces)

I am trying to layout a page with Bootsfaces and JSF 2.2. I like to show only three column in a row and then start new row but don't know, how to implement this. 

<h:form>
    <b:container>
        <b:row>
        <ui:repeat value="#{ClientBean4.custs}" var="custs">
            <b:column col-md="4"><h:outputText id="output" value="#{ClientBean4.counter}" /> </b:column>
            <h:panelGroup rendered="#{ClientBean4.counter == 0}">
                </b:row><b:row>
            </h:panelGroup>
        </ui:repeat>
        </b:row>
    </b:container>
</h:form>

after a long time, I wrote above code, but it's givng error like 'h:panelgroup' should be properly closed. It's giving meaning, that I started panelGroup and then closing a row, starting a new row, and then close panelGroup.

So, Is anyone have idea, how to implement a layout, where a row will have three columns (showing customer's object details per column), then close the row and start a new row. obvisouly, I dont know, how many objects will be in the list.

Solution

  • BootFaces offers a component that handles this. More specifically you can use <b:panelGrid columns="3"> to achieve this. This will give you a dynamic grid system that will grow vertically as you populate it but retain the number of rows that you specify.

    You can see the component in action here, https://showcase.bootsfaces.net/layout/panelgrids.jsf

    PrimeFaces also has a component for this, but I assume you want to use BootFaces as your original code uses it. If you prefer PrimeFaces, you can use the <p:dataGrid> component, which does something similar. This component even handles pagination.