Question

How to reference each individual checkbox in the outputLabel so that when I click on item’s label, it would effectively be the same as if I clicked on the checkbox?

<rich:dataGrid value="#{all}" var="item" columns="3">
    <h:outputLabel value="#{item.name}" for="what_here?" />
    <h:selectBooleanCheckbox value="#{item.selectedForLaterUse}" id="item#{item.id}" />
</rich:dataGrid>

A possibility that comes first to mind is of course

  for="item#{item.id}"

but since jsf id’s are relative, it would not work, right?

There is also one option to use selectManyCheckbox but that doesn’t seem to give an option to use columns.

Answer 1

You do not need to do it. JSF does it for you. Just specify a fixed ID as long as it’s in the same scope.

<rich:dataGrid value="#{all}" var="item" columns="3">
    <h:outputLabel value="#{item.name}" for="item" />
    <h:selectBooleanCheckbox value="#{item.selectedForLaterUse}" id="item" />
</rich:dataGrid>

JSF will generate the proper HTML accordingly. Open page in browser, rightclick and do View Source to see it yourself. The generated HTML element IDs are in this particular case composed of all parent NamingContainer components and the current item index.

Here’s an example of the generated output, assuming that you’re giving all NamingContainer components a fixed ID like <h:form id="form"> and <rich:dataGrid id="grid"> (otherwise JSF will autogenerate IDs like j_idt1 and so on, which would work perfectly fine as well but is not immediately readable):

<table id="form:grid" class="rf-dg">
  <tbody id="form:grid:dgb" class="rf-dg-body">
    <tr class="rf-dg-r">
      <td class="rf-dg-c">
        <label for="form:grid:0:item">one</label>
        <input id="form:grid:0:item" type="checkbox" name="form:grid:0:item" />
      </td>
      <td class="rf-dg-c">
        <label for="form:grid:1:item">two</label>
        <input id="form:grid:1:item" type="checkbox" name="form:grid:1:item" />
      </td>
      <td class="rf-dg-c">
        <label for="form:grid:2:item">three</label>
        <input id="form:grid:2:item" type="checkbox" name="form:grid:2:item" />
      </td>
    </tr>
  </tbody>
</table>