How to use h:selectOneRadio inside h:dataTable in JSF?

h:selectOneRadio and h:dataTable

This tips explains how to use the h:selectOneRadio tag inside h:dataTable iteration tag.

also read:

Introduction to JSF

JSF Interview Questions

Request Processing Lifecycle phases in JSF

Using h:selectOneRadio is not straight forward since JSF doesn’t provide easy mechanism for toggling the radio button selections. Programmer has to write the manual script code to toggle the radio selections. If you are looking for the use of check boxs inside h:dataTable, please read our other tips on How to use h:selectBooleanCheckBox within h:dataTable. But using radion button is some what tedious work compare to the check box. The following programs demonstrates how to use the radio button within h:dataTable.

JSP File (index.jsp)

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<html>
    <body>
        <f:view>
            <h:form>
                <h:commandButton action="#{jsfBean.submit}" value="Submit">
                </h:commandButton>
            </h:form>
        </f:view>
    </body>
</html>

JSP File (dataTable.jsp)

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<html>
    <script>
            function radioButton(radio) {
            var id = radio.name.substring(radio.name.lastIndexOf(':'));
            var el = radio.form.elements;
            for (var i = 0; i < el.length; i++) {
                if (el[i].name.substring(el[i].name.lastIndexOf(':')) == id) {
                    el[i].checked = false;
                }
            }
            radio.checked = true;
        }
    </script>
    <body>
        <f:view>
            <h:form>
                <h:dataTable var="loc" value="#{jsfBean.employees}" binding="#{jsfBean.htmlDataTable}">
                    <h:column>
                        <h:selectOneRadio onclick="radioButton(this);"
                                  valueChangeListener="#{jsfBean.setSelected}">
                            <f:selectItem itemValue="null" />
                        </h:selectOneRadio>
                    </h:column>
                    <h:column>
                        <h:outputText value="#{loc.name}"/>
                    </h:column>
                    <h:column>
                        <h:outputText value="#{loc.empNo}"/>
                    </h:column>
                    <h:column>
                        <h:outputText value="#{loc.city}"/>
                    </h:column>
                </h:dataTable>
                <h:form>
                    <h:commandButton action="#{jsfBean.dataSubmit}" value="Submit">
                    </h:commandButton>
                </h:form>
            </h:form>
        </f:view>
    </body>
</html>

JavaBean (JavaBeatJsfBean.java)

package javabeat.jsf;

import java.util.ArrayList;
import java.util.List;
import javax.faces.component.html.HtmlDataTable;
import javax.faces.event.ValueChangeEvent;

/**
 * source : www.javabeat.net
 */
public class JavaBeatJsfBean {

    private String field;
    private List<employee> employees;
    private Employee employee;
    private HtmlDataTable htmlDataTable;
    private List<employee> list = new ArrayList();

    public void setSelected(ValueChangeEvent event) {
        employee = (Employee) htmlDataTable.getRowData();
        list = new ArrayList<employee>();
        list.add(employee);
    }

    public List<employee> getEmployees() {
        return employees;
    }

    public void setEmployees(List<employee> employees) {
        this.employees = employees;
    }

    public HtmlDataTable getHtmlDataTable() {
        return htmlDataTable;
    }

    public void setHtmlDataTable(HtmlDataTable htmlDataTable) {
        this.htmlDataTable = htmlDataTable;
    }

    public Employee getEmployee() {
        return employee;
    }

    public void setEmployee(Employee employee) {
        this.employee = employee;
    }

    public String getField() {
        return field;
    }

    public void setField(String field) {
        this.field = field;
    }
    public String dataSubmit(){
        for (Employee employee : this.list)
        {
            System.out.println(employee.getCity());
            System.out.println(employee.getName());
            System.out.println(employee.getEmpNo());
        }
        return "success";
    }
    public String submit() {
        this.employees = new ArrayList<employee>();
        Employee employee1 = new Employee();
        employee1.setCity("Bangalore");
        employee1.setEmpNo("1");
        employee1.setName("Krishna");
        Employee employee2 = new Employee();
        employee2.setCity("Bangalore");
        employee2.setEmpNo("2");
        employee2.setName("ShunmugaRaja");
        Employee employee3 = new Employee();
        employee3.setCity("Bangalore");
        employee3.setEmpNo("3");
        employee3.setName("JoyChristy");
        this.employees.add(employee1);
        this.employees.add(employee2);
        this.employees.add(employee3);
        return "success";
    }
}

Employee.java

package javabeat.jsf;

/**
 * source : www.javabeat.net
 */
public class Employee {
    private String name;
    private String empNo;

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

    public String getEmpNo() {
        return empNo;
    }

    public void setEmpNo(String empNo) {
        this.empNo = empNo;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
    private String city;
}

faces-config.xml

<?xml version='1.0' encoding='UTF-8'?>
<faces-config version="1.2"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
    <managed-bean>
        <managed-bean-name>jsfBean</managed-bean-name>
        <managed-bean-class>javabeat.jsf.JavaBeatJsfBean</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
    </managed-bean>
    <navigation-rule>
          <navigation-case>
              <from-outcome>success</from-outcome>
              <to-view-id>/dataTable.jsp</to-view-id>
          </navigation-case>
    </navigation-rule>
</faces-config>