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

SHARE & COMMENT :

h:selectOneRadio and h:dataTable

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

also read:

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>

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Comments

  1. Hi there, simply was aware of your weblog via Google, and found that it is really informative. I am going to watch out for brussels. I’ll be grateful for those who proceed this in future. Many folks might be benefited out of your writing. Cheers!

  2. Syd Deo says:

     i tried that, its not working.

  3. It is not throwing any error. But the bean method is not getting called.

Speak Your Mind

*

Close
Please support the site
By clicking any of these buttons you help our site to get better