Hobione's Weblog

Living & Breathing in Web 2.0 Era

dataTable and radio button in JSF

Scenerio: Wanted to render the same radio button group for all rows in the table so that only one button can be selected at a time.  There seem to be no easy solution to that simple problem!

DataTable and RadioButton

Reason: The above plan apparently doesn’t work, because <h:selectOneRadio> renders an HTML “table” by itself, and that “messes up” the other “table” that the <h:dataTable> tag renders.

Solution:  One work around would be to use TomaHawk but instead of mixing two JSF implementations I went ahead to use command link.

Commnad Link2nd SoulutionThe key to getting this to work is to define the selectOneRadio component outside of the table. Then by setting the layout attribute to spread and using the ice:radio components inside the dataTable it gives you the rough layout/functionality.


<h2>Main Page</h2>
<ice:form>
 <ice:panelGroup id="tablePanel">

 <ice:selectOneRadio id="trainingClassRadio"
 value="#{testBean.selectedClass}"
 partialSubmit="true"
 valueChangeListener="#{testBean.radioChanged}"
 layout="spread">
 <f:selectItems value="#{testBean.radioItems}"/>
 </ice:selectOneRadio>

 <ice:dataTable var="class" value="#{testBean.trainingClassList}"
 varStatus="classStatus">
 <ice:column>
 <f:facet name="header">
 <ice:outputText value=""/>
 </f:facet>
 <ice:radio for="trainingClassRadio"
 index="#{classStatus.index}"/>
 </ice:column>

 <ice:column>
 <f:facet name="header">
 <ice:outputText value="Class Name"/>
 </f:facet>
 <ice:outputText value="#{class.className}"/>
 </ice:column>
 <ice:column>
 <f:facet name="header">
 <ice:outputText value="Class Number"/>
 </f:facet>
 <ice:outputText value="#{class.classNum}"/>
 </ice:column>
 <ice:column>
 <f:facet name="header">
 <ice:outputText value="Class Description"/>
 </f:facet>
 <ice:outputText value="#{class.classDesc}"/>
 </ice:column>
 </ice:dataTable>
 </ice:panelGroup>

 <ice:panelGrid columns="2">
 <ice:outputText value="Selected Row - Class Name:"/>
 <ice:outputText value="#{testBean.selectedTraining.className}"/>
 <ice:outputText value="Selected Row - Class Number:"/>
 <ice:outputText value="#{testBean.selectedTraining.classNum}"/>
 <ice:outputText value="Selected Row - Class Description"/>
 <ice:outputText value="#{testBean.selectedTraining.classDesc}"/>
 </ice:panelGrid>

 </ice:form>

May 29, 2009 Posted by HobiOne | Java Server Faces | | 7 Comments