how to have more than one column of checkboxes in 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,

score 3 · Answer 1 · answered Mar 17 '18 at 18:48

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:

I implemented this today and it works as advertised with the exception of presetting the header checkbox to true upon init. when I do this, the check box is checked as would be expected but when I click on the checkbox, it won't change state. If it's preset to false, I don't have this issue. Thoughts? — ttibbetts, Mar 30 '18 at 14:34

how to have more than one column of checkboxes in primefaces

| Class | [] subclass 1 | [] subclass 2 |

| Cls A | [] | [] |

| Cls B | [] | [] |

| Cls n | [] | [] |

1 Answers1

Linked