Render p:selectManyCheckbox with 10 columns

Question

I developed an interface JEE / JSF for some statistics. I created checkbox to select references that the user wishes to display, but the trouble is that I use to generate the checkbox Arraylist based on data from my database.

And I can not position them as I want. I wish that after 10 checkbox, others generates directly to the line etc. ..

I have this result

And i wish i could do this

MTBFBEAN

private List<String> selectedReference = new ArrayList<String>();
private List<String> listReference = new ArrayList<String>(); 
private Boolean afficher = false; // Déclaration du bool pour le rendered de
                                    // ma vue dans MTBF

@SuppressWarnings("deprecation")
public StatisticsBeanMTBF() {
    this.beginDate = new Date(2001, 00, 01);
    List<ProductConfModel> listtmp = this.moduleGlobal.getProductConfModels(2);
    for (ProductConfModel pcm : listtmp) {

        this.listReference.add(pcm.getReference());
        }
    }

public void mTBFByType() {
    this.afficher = true;
    this.listMTBF = new ArrayList<StatistiquesMTBF>();
    List<StatistiquesMTBF> suspense = this.moduleGlobal.getMTBFByType(nbHeure, nbJour, NS, DAE, beginDate, endDate);
    for (StatistiquesMTBF smtbf : suspense) {
        for (String s : this.selectedReference) {
            if (smtbf.getReference().equals(s)) {
                this.listMTBF.add(smtbf);
            }

JSF XHTML

    <h:outputText value="Date début :* " />
                    <p:calendar value="#{statisticsBeanMTBF.beginDate}"
                        navigator="true" required="true" />
                    <h:outputText value="Date fin:* " />
                    <p:calendar value="#{statisticsBeanMTBF.endDate}" navigator="true"
                        required="true" />

                </h:panelGrid>
                <h:panelGrid columns="1">
                    <h:outputText value="Selectionner votre référence : " />

                    <p:selectManyCheckbox id="grid" columns="5"
                        value="#{statisticsBeanMTBF.selectedReference}">
                        <f:selectItems value="#{statisticsBeanMTBF.listReference}" />
                        </p:selectManyCheckbox> 
                </h:panelGrid>
                <p:separator />

If anyone can help me it would be nice.

Thank you !

Answer 1

I get this outcome using:

<h:panelGroup layout="block" styleClass="selection">
    <p:selectManyCheckbox layout="pageDirection" value="#{selection.selection}">
</h:panelGroup>

and setting each <tr>:

.selection tr {
   float: left;
    width: 33%;
} 

In your case set it to 10% and outer container to width: 100%.

It looks like that:

Answer 2

You should add layout="grid" to your p:selectManyCheckbox according to this example. Like this :

<p:selectManyCheckbox id="grid" layout="grid" columns="5" value="#{statisticsBeanMTBF.selectedReference}">
    <f:selectItems value="#{statisticsBeanMTBF.listReference}" />
</p:selectManyCheckbox>

EDIT :

A fast search in PrimeFaces documentations show that columns was added in the version 4.0. If you doesn't have this version or can't upgrade, you'll need to do it the old way with some CSS.