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 !

Edwardoedwards

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:

Scherle

Hello, thank you for your help, but I'm 4.0 primefaces, your tags <h: this is not the primefaces. – Edwardoedwards

The fact you are using PrimeFaces doesn't mean you can't use plain JSF tags. I'm also using PF4.0 and yet.. – Scherle

Just switched to <p:selectManyCheckbox> and the outcome is the same! – Scherle

Thank you Kuba it works perfectly! Thank you all for the time you spent to help me! – Edwardoedwards

.selection td { float: left; width: 33%; } //worked me – Barge

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.

Clemen

It should. It's helpful to mention PF version and elaborate "doesn't work" in more detail. – Excellence

Hi BalusC, I use primefaces 4.0. – Edwardoedwards

Alexandre Lavoie : Look at my JSF, I am 4.0 and I tried the columns – Edwardoedwards

Apparently you're not a actually using 4.0. Likely your runtime classpath is dirty. – Excellence

Thanks is a excelent solution :) – Parliament