StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I think there are three ways of doing that:</p> <ol> <li><p>Use the Tomahawk <code><t:selectOneRadio></code> and <code><t:radio></code> components, as described by <a href="https://stackoverflow.com/users/203907/bozho">Bozho</a>. This is the simplest solution. The only drawback is that you have to integrate another components library in your project (<code>Tomahawk</code>). However, this library is compatible with others libraries, like <a href="http://jboss.org/richfaces" rel="nofollow noreferrer">Richfaces</a> or <a href="http://www.icefaces.org/main/home/" rel="nofollow noreferrer">Icefaces</a>.</p></li> <li><p>Create your own component for that. This is more complex than the previous solution, and may not be really interesting as the <code>Tomahawk</code> library is already providing this component...</p></li> <li><p>Use the "basic" <code><h:selectOneRadio/></code> component and then use <code>Javascript</code> 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 <code><h:selectManyCheckbox></code> component only provides the <code>pageDirection</code> and <code>lineDirection</code> layouts. So I decided to display them using the <code>pageDirection</code> layout, and then manipulate the generated HTML code to break the list into two parts, using Javascript.</p></li> </ol> <p>So here is what I did on the JSF code:</p> <pre><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> </code></pre> <p>and the Javascript function (using <code>jQuery</code>, which is bundled in <code>Richfaces</code> library):</p> <pre><code>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(); } } } </code></pre> <p>(more explanations about this code <a href="https://stackoverflow.com/questions/261998/modifying-the-structure-of-a-html-table-with-jquery">here</a>)</p> <p>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 <code><rich:datatable></code>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload