Search code examples
jsf-2

Grouping radio button inside data grid using primefaces 3.3 and jsf 2.0


I am new to jsf 2.0 and therefore i am facing a serious issue grouping the prime faces datagrid and radio buttons. I am using JSF 2.0-Primefaces 3.3, java 1.6, and running my application on tomcat server on windows operating system.

The issue is grouping data grid and radio button. The following paragraph will describe about an example code:

    @ManagedBean(name="quickBill")
    @ViewScoped
    public class QuickBill extends BaseManagedBean implements Serializable {
private List<String[]> insurerIDs=null;

@PostConstruct
public void init(){

    loadInsurer();
}   

private void loadInsurer(){
    logger.info("Entered Load Insurer");
    insurerIDs = new ArrayList<String[]>();

    if (null != insurerList) {
        insurerIDs.add(new String[] {"InsurerID1","Insurer_Name1") });
        insurerIDs.add(new String[] {"InsurerID2","Insurer_Name2") });
        insurerIDs.add(new String[] {"InsurerID3","Insurer_Name3") });
        insurerIDs.add(new String[] {"InsurerID4","Insurer_Name4") });

    }
}
public List<String[]> getinsurerIDs() {
    return insurerIDs;

}


  }

The jsf code is as follows:

    <p:dataGrid  var="quickBillVar" value="#{quickBill.insurerIDs}" columns="4" > 
        <p:column selectionMode="single">                              
           <p:selectOneRadio id="options" value="#{quickBill.selectedOption}">                    
          <f:selectItem itemLabel="#{quickBillVar[1]}" itemValue="#{quickBillVar[1]}"/>   
          </p:selectOneRadio>   
          <p:commandLink id="insurerid"  title="Isurer">
   <p:graphicImage value="../../images/insurers1/#{quickBillVar[0]}.jpg"/>   
 </p:commandLink>   
   </p:column>                                  
   </p:dataGrid>

The above code when executed results in the display of the radio button, which allows user to select multiple radio button at the same time. However the requirement is to restrict user to select only one button rather than allowing user to select multiple button at a time. I have also used selectionMode="single" to produce the expected output but it didn't help much.

Kindly help me on this or provide me with examples which will overcome this issue.


Solution

  • I believe the custom layout in this example will help. https://www.primefaces.org/showcase/ui/input/oneRadio.xhtml