Layout of h:selectManyCheckbox

h:selectManyCheckbox has a layout of either page or line.
How can i set the layout of h:selectManyCheckbox in such a way that if there are 20 checkboxes then they arrange themselves for eg. 5 in a row and then move onto next row ie 4 rows of 5 checkboxes each.

Unfortunately "page" or "line" layout options are the only ones available from the Sun RI. I found that out the hard way last week.
There are a couple of options. The MyFaces (tomahawk) checkbox component supports a "grid" layout. Although I did not use that option, it might be worth trying if you want to go that route.
I ended up extending the Sun RI renderer for both checkboxes and radio buttons. It's not too difficult, especially if you're using Facelets (no tag class required). Extending an RI renderer is risky because new versions can break your subclass, but it's a fairly easy solution if you're willing to put up with that risk.
I posted some brief notes on my solution. It's not complete, but it should be enough to get you started.
http://forum.java.sun.com/thread.jspa?threadID=5176296&tstart=0
Tom

Similar Messages

Is this even possible with a selectManyCheckbox???

I know I can do one of two layouts with a selectManyCheckbox, line or page. I would like to have the checkboxes go horizontally i.e. line, but after x number of them, say 5, I would like to start a new row rather than scrolling off to the right... I see that a selectManyCheckbox actually renders an HTML table so I tried to use the pass-through attribute "cols" to set it but no dice. Anyone have any idea how to do this or even if it is possible?

I would say that you would have a device at the dsl first then connect everything else up that is needed. It would have to be wired to the dsl.

SelectManyCheckbox item font

I'm having a problem making the item text bold in a selectManyCheckbox. I have defined a css style:
af|selectManyCheckbox::item-text.debtProvidercheckbox
font-weight:bold;
In my jspx, I set the checkbox sytle as:
<af:panelGroupLayout layout="horizontal">
<af:panelGroupLayout layout="vertical">
<af:selectManyCheckbox value="#{pageFlowScope.backing_wizard_bean.medicalDebtTypes}"
simple="true"
styleClass="debtProvidercheckbox">
<f:selectItems value="#{bindings.MajorDebtTypeDebtOriginationTypeROView.items}"/>
</af:selectManyCheckbox>
</af:panelGroupLayout>
The checkbox item text displays as normal font weight.

I solved it.
my css style is:
af|selectManyCheckbox.providercheckbox::item-text
font-weight:bold;
my jspx is:
<af:panelGroupLayout layout="vertical"
id="consumerPanelGroupLayout">
<af:selectManyCheckbox value="#{pageFlowScope.backing_wizard_bean.consumerTypes}"
simple="true"
styleClass="providercheckbox"
id="consumerId">
<f:selectItems value="#{bindings.ConsumerROView.items}"/>
</af:selectManyCheckbox>
</af:panelGroupLayout>

Controlling SelectManyCheckbox layout in ADF Faces

Hi,
The only possibilities for the layout for an ADF faces select many checkbox seem to be "horizontal" or "vertical". How can we control the layout to say - have 10 checkboxes laid out horizontally in two groups of 5 vertically laid out checkboxes ?
If there is no such attribute to control the layout better, does anyone have any recommendations on how this can be accomplished in any alternative way?
Thank you

Hi,
no, but what about using a scrollbar?
<af:form inlineStyle="width:400px; height:200px; overflow:auto;">
          <af:selectManyCheckbox label="Departments" layout="vertical">
            <af:forEach items="#{bindings.DepartmentsView1.rangeSet}" var="li">
              <af:selectItem label="#{li.DepartmentName}"
                             value="#{li.DepartmentId}"/>
            </af:forEach>
          </af:selectManyCheckbox>
        </af:form>Frank

Please, How do i get the values from a h:selectManyCheckbox ?

How do i get the values (selected or not) of a <h:selectManyCheckbox> tag and show them .For instance
i have the folowing options :
<h:selectManyCheckbox
                       id="cartas"
                   layout="pageDirection"
                    value="#{store.cartas}">
      <f:selectItems
                    value="#{cartas}"/>
    </h:selectManyCheckbox>
    <h:message styleClass="validationMessage" for="newsletters"/>with my faces-config.xml:
<managed-bean>
    <description></description>
    <managed-bean-name>cartas</managed-bean-name>
    <managed-bean-class>java.util.ArrayList</managed-bean-class>
    <managed-bean-scope>application</managed-bean-scope>
    <list-entries>
      <value-class>javax.faces.model.SelectItem</value-class>
      <value>#{cartas0}</value>
      <value>#{cartas1}</value>
      <value>#{cartas2}</value>
      <value>#{cartas3}</value>
    </list-entries>
</managed-bean>
<managed-bean>
    <managed-bean-name>cartas0</managed-bean-name>
    <managed-bean-class>javax.faces.model.SelectItem</managed-bean-class>
    <managed-bean-scope>none</managed-bean-scope>
    <managed-property>
      <property-name>label</property-name>
      <value>Semanal</value>
    </managed-property>
    <managed-property>
      <property-name>value</property-name>
      <value>200</value>
    </managed-property>
</managed-bean>
<managed-bean>
    <managed-bean-name>cartas1</managed-bean-name>
    <managed-bean-class>javax.faces.model.SelectItem</managed-bean-class>
    <managed-bean-scope>none</managed-bean-scope>
    <managed-property>
      <property-name>label</property-name>
      <value>As bruxas</value>
    </managed-property>
    <managed-property>
      <property-name>value</property-name>
      <value>201</value>
    </managed-property>
</managed-bean>
<managed-bean>
    <managed-bean-name>cartas2</managed-bean-name>
    <managed-bean-class>javax.faces.model.SelectItem</managed-bean-class>
    <managed-bean-scope>none</managed-bean-scope>
    <managed-property>
      <property-name>label</property-name>
      <value>Exercise</value>
    </managed-property>
    <managed-property>
      <property-name>value</property-name>
      <value>202</value>
    </managed-property>
</managed-bean>
<managed-bean>
    <managed-bean-name>cartas3</managed-bean-name>
    <managed-bean-class>javax.faces.model.SelectItem</managed-bean-class>
    <managed-bean-scope>none</managed-bean-scope>
    <managed-property>
      <property-name>label</property-name>
      <value>Gusman Park</value>
    </managed-property>
    <managed-property>
      <property-name>value</property-name>
      <value>203</value>
    </managed-property>
</managed-bean>Thanks for the atention!! All the best!!

Hi,
In your backing bean you will need to add a new variable to bind your control to, I think this variable needs to be of teh "HtmlSelectManyCheckbox" type. The on your jsp page you can add binding="#{myBean.myVariable}".
When you want to get the values of the selectMany in your backing bean, you can call the getSelectedValues() function on your HtmlSelectManyCheckbox variable.
in backing bean:
private HtmlSelectManyCheckbox hsmc;
public HtmlSelectManyCheckbox getHsmc(){
    return hsmc;
public void setHsmc(HtmlSelectManyCheckbox hsmc){
    this.hsmc = hsmc;
public void someFunction(){
   Object[] obs = hsmc.getSelectedValues();
}On jsp page:
<h:selectManyCheckbox
                       id="cartas"
                   layout="pageDirection"
                    value="#{store.cartas}"
                     binding="#(myBean.hsmc}">
      <f:selectItems
                    value="#{cartas}"/>
    </h:selectManyCheckbox>

How to populate default values for SelectManyCheckBox?

I have this <af:selectManyCheckbox> , which I want to set default value, or later other taskflow will change it's value:
<af:selectManyCheckbox id="smc4"
layout="vertical"
valueChangeListener="#{backingBeanScope.productGroupSelectionBackingBean.lendingSelectionDeselectionListener}"
autoSubmit="true"
valuePassThru="true"
value="#{pageFlowScope.productGroupSelectionHelper.newLendingProduct}">
<f:selectItems id="si4" value="#{bindings.id.items}"/>
</af:selectManyCheckbox>
the selectItems is binding to a list of VO, in which only IDs and label names are saved,both are of type String.
the newLendingProduct is of type List<SelectItem>.
During the debugging I found that instead of returning List<SelectItem>, the af:selectManyCheckbox is returning Arrays$ArrayList<object> to me. What is Arrays$ArrayList<object>? After looking into it's value, I found it has an attribute "a", which is an array of String, storing the IDs that are selected.
I also tried list of string and array of string for newLendingProduct, both can get the return value from page, but cannot set the screen.
I think I shouldn't use List<SelectItem> to store value of af:selectManyCheckbox, but what should I use?

U can bind ur value property of af:selectManyCheckbox to ArrayList<String> object
Step 1.Add property in ur backing bean ArrayList<String> selectedValue = new ArrayList<String>();
Step 2.Create get and set method for selectedValue
Step 3. bind this selectedValue to value property ( value="#{backingBeanScope.beanName.selectedValue}" )
Thanks
Dinil Mithra V S

How to set different color for items in selectManyCheckbox

hi,
I would like to change item text background color for each item on selectManyCheckbox (different for each item).
It is only 5 items so that could be static reference or select.
I know only how to change background for all items
af|selectManyCheckbox::item-text {
    background:orange;
How to select concrete item text and change color for only them?
I found similar problem:
css - Set background color of every individual checkbox of p:selectManyCheckbox - Stack Overflow
but this dont work for me because I dont have in adf tr structure
I need somethink like this:
af|selectManyCheckbox::item-text XXXX - select here one of the item by number on list or id {
    background:orange;

hi,
thanks Alejandro and Federico for answers.
I use JDev 11.1.1.6. I dont write it in previously post because I think that is a more css then adf problem.
I have 5 selectItem based on simple List<String> {"text1", "text2", "text3", "text4". "text5"}:
<af:selectManyCheckbox label="List" id="smc2"
                                           layout="horizontal"
                                           value="#{bean.listInBean}"
                                           autoSubmit="true">
                      <af:selectItem label="text1" value="text1" id="si47"/>
                      <af:selectItem label="text2" value="text2" id="si43"/>
                      <af:selectItem label="text3" value="text3" id="si46"/>
                      <af:selectItem label="text4" value="text4" id="si45"/>
                      <af:selectItem label="text5" value="text5" id="si44"/>
                    </af:selectManyCheckbox>
and I would like to color first selectItem text to orange, second to red.. etc, The list is a static list. Not would be changed.
After Alejandro answer I build simple for each element (anyCollection contains item with two fields: textValue and label {(text1,text1), (text2,text2)...}
<af:forEach items="#{bean.anyCollection}"
                                  var="item">
                        <af:selectItem id="si48" value="#{item.textValue}" styleClass="yourClassName#{var.index}"
                                       label="#{item.label}"/>
                      </af:forEach>
And now if I have my var called "item" I can write 5 css style classe yourClassName#{var.index} with different color, but there is a problem:
Attribute styleClass is not defined for af:selectItem
If it will be so simple I will just add 5 style classes for each selectItem
<af:selectItem label="text1" value="text1" id="si47" styleClass="yourClassName0"/>
<af:selectItem label="text2" value="text2" id="si43" styleClass="yourClassName1"/>
Should I use other component then adf facer rich?

How to display selectManyCheckbox in a table ?

hi,
i have a problem with selectManyCheckBox.
i have list in my bean and in that i have selectItem objects.
but when i displaying in the screen the whole objects are displaying in a pageDirection or lineDirection.(in one line --- one by one).
This list will come from database, so idont know how many r there.based on that i want to 4 check boxes in a line and next line will have next four check boxes, like that i want to display the all objects.
MyCode is :
<h:selectManyCheckbox value="#{bean.value}" layout="pageDirection">
<f:selectItems value="#{bean.list}"/>
</h:selectManyCheckbox>
could u pls see this,
thanks in advance,
anil

For this you take help of richfaces data table.
It provides facility of rich:columnGroup and rich:columns.
Not sure but you can take help of it.

Need Help with particular layout

Hi,
I need help with a particular layout with jsf.
I dont be able to get this layout with checkbox and inputtext.
label checkbox
label checkbox
label checkbox
label checkbox
label checkbox labelinputtext inputext
with panelgrid I obtain only this one
label checkbox
label checkbox
label checkbox labelinputtext inputext
label checkbox
label checkbox
But I want place inputext and its label next to the last checkbox.
Could someone help me? Thanks

<h:panelGrid columns="2">
     <h:selectManyCheckbox layout="pageDirection" styleClass="styled">
          <f:selectItem itemLabel="Ischemica" itemValue="Ischemica"/>
          <f:selectItem itemLabel="Ipertensiva" itemValue="Ipertensiva"/>
          <f:selectItem itemLabel="Valvolare" itemValue="Valvolare"/>
          <f:selectItem itemLabel="Cardiomiopatia" itemValue="Cardiomiopatia"/>
          <f:selectItem itemLabel="Altro" itemValue="Altro" />
     </h:selectManyCheckbox>
     <h:panelGrid columns="2" styleClass="tableA" >
          <h:outputText value="Specificare" />
          <h:inputText value="" styleClass="styled2" />
     </h:panelGrid>
</h:panelGrid>
In my css I insert class
.tableA{
vertical-align: bottom;
}

How to switch display of label for SelectOneRadio in horizontal layout

Using selectOneRadio with the horizontal layout and it displays the label and then the radio buttons to the right of the label.
LABEL RADIO1 RADIO2 RADIO 3
Is there a way to display the radio buttons to the LEFT of the label instead?
RADIO1 RADIO2 RADIO3 LABEL
Another question .... instead of radio buttons, we'd like to use check boxes instead, with the same functionality as the selectOneRadio ... just checkboxes instead of radio buttons.
Can't find anything like selectOneCheckbox though, just a SelectBooleanCheckbox or SelectManyCheckbox, which won't work.
Thanks for any help.

Hi,
you can use combination of selectOneRadio and outputLabel so in selectOneRadio leave label blank and put this text in outputLabel component, which you store to the right of selectOneRadio
        <af:panelGroupLayout id="pgl1" layout="horizontal">
          <af:selectOneRadio id="sor1" layout="horizontal">
            <af:selectItem label="label1" value="1" id="si1"/>
            <af:selectItem label="label2" value="2" id="si2"/>
          </af:selectOneRadio>
          <af:outputLabel value="outputLabel1" id="ol1"/>
        </af:panelGroupLayout>regards,
Branislav

SelectManyCheckbox and CSS formatting

hi,
im using the selectManyCheckbox component in my webapplication. i get the selectItems that you can select from my database. there are about 6 possible choices. my problem is that all checkbox-elements are displayed in a row next to each other. i want to display each checkbox in an own row. how can this be done? by a styleSheet? i'm new at using stylesheets, and i don't know how this could be done, so it would be nice to post an example css for formatting a checkbox. or can it be done by jsf itself? it would be nice from you to tell me.
thx

Use layout="lineDirection". It's an attribute on the selectManyCheckbox tag.
No need for CSS in this particular solution.
Please use the TLD docs to find out what attributes are available and what they do:
http://java.sun.com/javaee/javaserverfaces/1.1_01/docs/tlddocs/index.html
CowKing

IllegalArgumentException using selectManyCheckbox

Hello
I am have problems using selectManyCheckbox in my JSPs. I can get the checkboxes to be displayed correctly, and set correctly with values from the database.
But if I try to navigate off the page, or save the page when there are values set in the checkboxes, I get an IllegalArgumentException thrown in the validation.
The JSP looks like this:
<h:selectManyCheckbox value="#{role.selectedPrivileges}" layout="pageDirection">
<f:selectItems value="#{role.privileges}" />
</h:selectManyCheckbox>The backing bean has these in it:
private SelectItem[] privileges;
private String[] selectedPrivileges;...with the usual getters and setters.
The privileges array of SelectItem objects is initially set up in an action with this:
public SelectItem[] getPrivilegesAsSelectItems()
List<Privilege> privileges = cache.getPrivileges();
SelectItem[] result = null;
if (privileges != null)
    int n = privileges.size();
    if (n > 0)
      result = new SelectItem[n];
      for (int i = 0; i < n; i++)
        Privilege each = privileges.get(i);
        result[i] = new SelectItem(each.getId().toString(), each.getName());
return result;
}...and the selectedPrivileges String array is set like this:
List<RolePrivilegeLink> rvls = roleProfile.getRolePrivilegeLinks();
String[] values = new String[rvls.size()];
int i = 0;
for (RolePrivilegeLink each: rvls)
values[i] = each.getPrivilegeId().toString();
roleBean.setSelectedPrivileges(values);Sorry if this seems a bit boring, but I'm including this stuff because it shows I am using Strings as the values; I read somewhere that selectManyCheckbox tags only work with string values.
The error stack I get in the browser is:
500 Internal Server Error
java.lang.IllegalArgumentException
at javax.faces.component.SelectItemsIterator.next(SelectItemsIterator.java:166)
at javax.faces.component.UISelectMany.matchValue(UISelectMany.java:421)
at javax.faces.component.UISelectMany.validateValue(UISelectMany.java:390)
at javax.faces.component.UIInput.validate(UIInput.java:665)
at javax.faces.component.UIInput.executeValidate(UIInput.java:869)
at javax.faces.component.UIInput.processValidators(UIInput.java:432)
at javax.faces.component.UIForm.processValidators(UIForm.java:190)
at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:932)
at javax.faces.component.UIViewRoot.processValidators(UIViewRoot.java:362)
at com.sun.faces.lifecycle.ProcessValidationsPhase.execute(ProcessValidationsPhase.java:98)
at com.sun.faces.lifecycle.LifecycleImpl.phase(LifecycleImpl.java:245)
at com.sun.faces.lifecycle.LifecycleImpl.execute(LifecycleImpl.java:110)
at javax.faces.webapp.FacesServlet.service(FacesServlet.java:213)
...I would be grateful for any help, or if anyone knows of a good online tutorial about selectManyCheckbox tags.
Thanks very much
Matt West.

Hi
The privileges array ("roleBean" backing bean "privileges" property) is set in an action by calling the getSelectedPrivilegesAsSelectItems method.
roleBean.setPrivileges(cacheBean.getPrivilegesAsSelectItems());Thanks BalusC.
Matt.

Help for a selectManyCheckBox

I use a selectManyCheckBox component with selectItems like this:
<h:selectManyCheckbox id="reponse1" value="#{feuille1.reponse1}" layout="pageDirection" required="true">
<f:selectItems value="#{feuille1.list1}"/>
</h:selectManyCheckbox>
i use a managed bean which return a List named list1.(setxx and getxx are positionned)
The problem is that when i enter in my page, all the boxes are selected (as default value) and the selected value is null even if i select one box.
please say me what is the problem with my code.

I use a selectManyCheckBox component with selectItems like this:
<h:selectManyCheckbox id="reponse1" value="#{feuille1.reponse1}" layout="pageDirection" required="true">
<f:selectItems value="#{feuille1.list1}"/>
</h:selectManyCheckbox>
i use a managed bean which return a List named list1.(setxx and getxx are positionned)
The problem is that when i enter in my page, all the boxes are selected (as default value) and the selected value is null even if i select one box.
please say me what is the problem with my code.

Setting check mark for SelectManyCheckbox item

I'm trying to set the check mark for a SelectManyCheckbox item from a backing bean and cannot find any explicit explanation or example to do this. This would be used to have a command button select all checkboxes and a command button to clear all checkboxes.
I've been trying to set the SelectItem value, but while log messages suggest what is desired has occurred, nothing visually changes. Here's the key parts of what I'm working with so far.
<h:selectManyCheckbox
id="patients" layout="pageDirection"
value="#{SelectBean.patientsSelected}" >
<f:selectItems value="#{SelectBean.patientSelects}" />
</h:selectManyCheckbox>
<h:commandButton type="submit" value="Select All Patients"
id="allPatients"
action="update"
actionListener="#{SelectBean.onSelectAll}" />
private Collection<SelectItem> patientSelects;
private List<String> patientsSelected;
for (int i = 0; i < 10; i++) {
value = false;
label = locationSelected + "-" + "patient" + Integer.toString(i);
patientSelects.add(new SelectItem(value, label));
public void onSelectAll(ActionEvent event) {
for (Iterator it = patientSelects.iterator(); it.hasNext();) {
    SelectItem si = (SelectItem) it.next();
      si.setValue(true);
}

the arrayList you suggest doesn't even contain these items.You have to prefill the patientsSelected yourself to mark preselected items.
Basic example:<h:selectManyCheckbox value="#{myBean.selectedItems}" />
    <f:selectItems value="#{myBean.selectItems}" />
</h:selectManyCheckbox>MyBeanprivate List<String> selectedItems; // + getter + setter
private List<SelectItem> selectItems; // + getter + setter
    // Prefill selectItems.
    selectItems = new ArrayList<SelectItem>();
    selectItems.add(new SelectItem("value1", "label1"));
    selectItems.add(new SelectItem("value2", "label2"));
    selectItems.add(new SelectItem("value3", "label3"));
    selectItems.add(new SelectItem("value4", "label4"));
    selectItems.add(new SelectItem("value5", "label5"));
    // Preselect item #2 and #4.
    selectedItems = new ArrayList<String>();
    selectedItems.add("value2");
    selectedItems.add("value4");
}

Conversion Error of SelectManyCheckBox

Hi @ all,
I need your help urgently!
I want to realize two SelectManyCheckBox, each of them has a valueChangeListener. When user change the current state of the check boxes, some actions are performed.
The problem now is when one check box is clicked(a valueChangeListener is called), then a conversion error message is shown out, which says there is a conversion error occured at the other SelectManyCheckBox component.
I tried several times and found, only if the presious state of the check box component is empty, such conversion error occurs.
The codes are like following:
                       <TD>
                             <h:selectManyCheckbox value="#{admin.filterSelection1}" id="filter1" immediate="true"
                                  valueChangeListener="#{admin.firstFilter}" onchange="submit()">
                                 <f:selectItems value="#{admin.filters1}"/>
                            </h:selectManyCheckbox>
                       </TD>
                        <TD>
                             <h:selectManyCheckbox value="#{admin.filterSelection2}" id="filter2" immediate="true"
                                  valueChangeListener="#{admin.secondFilter}" onchange="submit()">
                                 <f:selectItems value="#{admin.filters2}"/>
                            </h:selectManyCheckbox>
                       </TD>..............
and the corresponding properties in the backing bean are:
     private ArrayList filterSelection1;
     private ArrayList filterSelection2;
     private SelectItem[] filters1;
     private SelectItem[] filters2;in the constructor of the backing bean, i initialized filters1, filters2 also filterSelection1 and filterSelection2. And their set , get methods are generated by eclipse automatically.
Waiting for your answers......
Finally I wish the person, who replied, a happier Christmas, and the person who does not replied, a happy Christmas. :-)
db

thanks for your reply, but i think my problem is not what you meant.
I changed my code a little bit, the conversion error remains......
                       <TD>
                         <h:selectOneRadio value="#{admin.filterSelection1}" id="filter1" layout="pageDirection"
                                        valueChangeListener="#{admin.firstFilter}" immediate="true" onchange="submit()">
                                   <f:selectItem itemValue="studenten" itemLabel="Nur Studenten" />
                                   <f:selectItem itemValue="mitarbeiter" itemLabel="Nur Mitarbeiter" />
                                   <f:selectItem itemValue="alle" itemLabel="Alle" />
                                   <f:selectItem itemValue="selectAll" itemLabel="Alle an/aus" />
                         </h:selectOneRadio>
                       </TD>
                        <TD>
                         <h:selectOneRadio value="#{admin.filterSelection2}" id="filter2" layout="pageDirection"
                                        valueChangeListener="#{admin.secondFilter}" immediate="true" onchange="submit()">
                                   <f:selectItem itemValue="intern" itemLabel="Nur Intern" />
                                   <f:selectItem itemValue="ausser" itemLabel="Nur Auftr�ge" />
                                   <f:selectItem itemValue="alle" itemLabel="Alle" />
                                   <f:selectItem itemValue="selectAll" itemLabel="Alle an/aus" />
                         </h:selectOneRadio>
                       </TD>........................
     private String filterSelection1;
     private String filterSelection2;Beside that, I can not understand why even I set "immediate" property be "true", the set method is stilled called!!!!

Layout of h:selectManyCheckbox

Similar Messages

Maybe you are looking for