Sunday, January 28, 2007

Selecting af:tableSelectOne by clicking anywhare in the table row

There is a nice feature in the HTML to specify <label for="..."> tag for the <input type="radio" ...> to be able to click on the text/image provided inside the <label> tag to select the radio button. Same feature is available in the JSF. You can use <af:tableSelectOne> in combination with the <h:outputLabel> tag for the <af:column> contents to archive same functionality.

Here is a short example:

<af:table value="#{bindings.TableBinding.collectionModel}"
var="row">
<af:tableSelectOne id="radioButton" required="true">
<af:commandButton text="Choose"
action="choose">
</af:commandButton>
</af:tableSelectOne>
<af:column headerText="My Column">
<h:outputLabel for="radioButton" style="display: block;width: 100%">
<af:outputText value="This is a column contents" />
</h:outputLabel>
</af:column>
</af:table>

No comments: