How to get radio button group functionality for each row in a table using jsf

Question

How to get layout like the following using h:selectOneRadio encapsulated within a rich:dataTable

row1   col1   col2   col3

row2   radio1 radio1 radio1

row3   radio2 radio2 radio2

Solution 1

I think there are three ways of doing that:

1. Use the Tomahawk <t:selectOneRadio> and <t:radio> components, as described by Bozho. This is the simplest solution. The only drawback is that you have to integrate another components library in your project (Tomahawk). However, this library is compatible with others libraries, like Richfaces or Icefaces.

2. Create your own component for that. This is more complex than the previous solution, and may not be really interesting as the Tomahawk library is already providing this component...

3. Use the "basic" <h:selectOneRadio/> component and then use Javascript code to move the radio elements where you want. In my project, I had a popup that contains a list of checkboxes, but I wanted to display all of them in two columns. Unfortunately, the <h:selectManyCheckbox> component only provides the pageDirection and lineDirection layouts. So I decided to display them using the pageDirection layout, and then manipulate the generated HTML code to break the list into two parts, using Javascript.

So here is what I did on the JSF code:

<h:selectManyCheckbox id="rolesSelection" value="#{myRolesBean.selectedRoles}" layout="pageDirection">
    <f:selectItems value="#{myRolesBean.RolesList}"/>
</h:selectManyCheckbox>

<script type="text/javascript">
    splitElementsIntoTwoColumns("myForm\\:rolesSelection");
</script>

and the Javascript function (using jQuery, which is bundled in Richfaces library):

function splitElementsIntoTwoColumns(tableId) {
    var idx = 1;
    var row, next;
    while ((row = jQuery('#' + tableId + ' tr:nth-child(' + idx++ + ')')).length) {
        if ((next = jQuery('#' + tableId + ' tr:nth-child(' + idx + ')')).length) {
            row.append(next.find('td'));
            next.remove();
        }
    }
}

(more explanations about this code here)

In your case, the Javascript function will be harder to write, as you want to move the radio buttons within a table generated by a <rich:datatable>.

Solution 2

You can use Tomahawk's <t:selectOneRadio> with layout="spread" and place one <t:radio> in each <rich:column>