Vertical Radio-Buttons with table/ui:repeat

user_3994580 0
Viewed 49

I need to achieve radio-buttons in multiple HTML-Table-Columns. The number of Columns and Rows is dynamic (data-driven).

Example:

Input 1 Input 2 Input n
O (group 1) O (group 2) O (group n)
O (group 1) O (group 2) O (group n)
O (group 1) O (group 2) O (group n)

My code creates the table like this:

<table>
  <ui:repeat value="rows" var="row">
    <tr>
      <ui:repeat value="cols" var="col">
        <td>
          O (group col.id)
        </td>
      </ui:repeat>
    </tr>
  </ui:repeat>
</table>

Now the question is: How can i create the needed radio-buttons the JSF-way?

All available components don't work this way:

  • p:selectOneRadio with custom layout doesn't play nice with ui:repeat, because i need one per column (not one per column and row)
  • h:selectBooleanCheckbox won't render as radio-buttons, so no MUTEX per group and wrong HTML
primefaces jsf
1 Answers

You can do this without ui:repeat by applying some CSS. For example:

<div style="display: flex">
    <p:selectOneRadio id="group1" layout="responsive" columns="1">
        <f:selectItem itemLabel="Group1 Option1" itemValue="Option1"/>
        <f:selectItem itemLabel="Group1 Option2" itemValue="Option2"/>
        <f:selectItem itemLabel="Group1 Option3" itemValue="Option3"/>
    </p:selectOneRadio>

    <p:selectOneRadio id="group2" layout="responsive" columns="1">
        <f:selectItem itemLabel="Group2 Option1" itemValue="Option1"/>
        <f:selectItem itemLabel="Group2 Option2" itemValue="Option2"/>
        <f:selectItem itemLabel="Group2 Option3" itemValue="Option3"/>
    </p:selectOneRadio>

    <p:selectOneRadio id="group3" layout="responsive" columns="1">
        <f:selectItem itemLabel="Group3 Option1" itemValue="Option1"/>
        <f:selectItem itemLabel="Group3 Option2" itemValue="Option2"/>
        <f:selectItem itemLabel="Group3 Option3" itemValue="Option3"/>
    </p:selectOneRadio>
</div>
user_8806190
Related