how to have more than one column of checkboxes in primefaces - primefaces

Question

I need to do a user permissions grid hopefully using a primefaces datatable. For each row: Column one is a class name, Column two is a checkbox for permission for one of two subclasses. Column three is a checkbox for permission for the other subclass. The headers of columns two and three must have the subclass title plus a checkbox, the toggles all the other checkboxes in that subclass. I think I can use two or three datatables side by side inside a scrollpanel but I'm having issues lining up the column text to the left of the checkbox (it wants to go on top).
Another thing I tried was to just have a selectbooleancheckbox for each row for each subclass and then have a listener for the column header checkbox that iterates through each item in the list and set the value accordingly. The issue I have here is that when I update the datatable, then all the checkboxes get stuck in the 'checked' state.
This is what my grid:
----------------------------------------|
| Class | [] subclass 1 | [] subclass 2 |
| Cls A | [] | [] |
| Cls B | [] | [] |
| Cls n | [] | [] |
There are 'n' possible rows to this table.
Does anyone have examples of what I want to do that they can point me to?
Thanks,

Answer 1

To start of, make sure you have some kind of model where you can bind the checkboxes to. For example:
public class MyObject {
private String name;
private boolean bool1;
private boolean bool2;
// Add getters and setters
public MyObject(String name, boolean bool1, boolean bool2) {
this.name = name;
this.bool1 = bool1;
this.bool2 = bool2;
}
}
Then, in your bean add a list of booleans to store the state of the checkboxes in the header:
private List<MyObject> myObjects = new ArrayList<>();
private List<Boolean> headerChecks = new ArrayList<>();
// Add getter and setter
#PostConstruct
private void init() {
myObjects.add(new MyObject("Object 1", false, true));
myObjects.add(new MyObject("Object 2", false, false));
myObjects.add(new MyObject("Object 3", true, true));
headerChecks.add(false);
headerChecks.add(false);
}
Now, in the checkbox column header have a checkbox with a listener. In the listener set the state of all checkboxes of that column. Then update only the checkboxes in the column. To do so I've used a selector selecting elements with a specific class: #(.bool1).
<p:column>
<f:facet name="header">
<p:selectBooleanCheckbox id="bool1" value="#{myBean.headerChecks[0]}">
<p:ajax listener="#{myBean.headerClickListener}"
update="#(.bool1)"/>
</p:selectBooleanCheckbox>
<p:outputLabel for="bool1" value="Bool 1"/>
</f:facet>
<p:selectBooleanCheckbox value="#{item.bool1}" styleClass="bool1"/>
</p:column>
In listener the state of the corresponding row checkboxes is set:
public void headerClickListener(AjaxBehaviorEvent event) {
for (MyObject myObject : myObjects) {
if (event.getComponent().getId().equals("bool1")) {
myObject.setBool1(headerChecks.get(0));
}
if (event.getComponent().getId().equals("bool2")) {
myObject.setBool2(headerChecks.get(1));
}
}
}
The full table:
<p:dataTable id="dataTable" value="#{myBean.myObjects}" var="item">
<p:column headerText="Name">
<h:outputText value="#{item.name}"/>
</p:column>
<p:column>
<f:facet name="header">
<p:selectBooleanCheckbox id="bool1" value="#{myBean.headerChecks[0]}">
<p:ajax listener="#{myBean.headerClickListener}"
update="#(.bool1)"/>
</p:selectBooleanCheckbox>
<p:outputLabel for="bool1" value="Bool 1"/>
</f:facet>
<p:selectBooleanCheckbox value="#{item.bool1}" styleClass="bool1"/>
</p:column>
<p:column>
<f:facet name="header">
<p:selectBooleanCheckbox id="bool2" value="#{myBean.headerChecks[1]}">
<p:ajax listener="#{myBean.headerClickListener}"
update="#(.bool2)"/>
</p:selectBooleanCheckbox>
<p:outputLabel for="bool2" value="Bool 2"/>
</f:facet>
<p:selectBooleanCheckbox value="#{item.bool2}" styleClass="bool2"/>
</p:column>
</p:dataTable>
Please note that this is all quite WET. You might want to DRY stuff up a bit.
Result: