How to add radio button and check box in DataTable of JSF

Add check box into the datatable

 

This is part jsp code of the datatable,

		<t:dataTable
                    id="checkboxTable"
                    value="#{backingBean.dataModel}"
                    var="row_data
                    columnClasses="borderless; table-layout: fixed;">
                    <t:column width="20px">
                        <f:facet name="header" >
                            <h:outputText value="Select"/>
                        </f:facet>
                        <h:selectBooleanCheckbox value="#{row_data.selected}" />
                    </t:column>
                    <t:column>
                    <t:outputText value="#{row_data.value}"/>
                    </t:column>
                </t:dataTable> 

 the code of bean:

public class TableData {
	private boolean selected = false;
	private String value;

	public boolean getSelected() {
		return selected;
	}

	public void setSelected(boolean selected) {
		this.selected = selected;
	}

	public String getValue() {
		return value;
	}

	public void setValue(String value) {
		this.value = value;
	}

}

 

Add radio button into the datatable

 

Javascript of select one radio button, actually the radio button is not in one group, user only can select one radio is controlled by the javascript.

 

function selectOne(form, button) {
turnOffRadioForForm(form);
button.checked = true;}

function turnOffRadioForForm(form) {
for (var i = 0; i < form.elements.length; i++) {
form.elements[i].checked = false;}
}

 JSF Code of h:dataTable Table on JSP Page

 

We will use valueChangeListener for this, as when user check the radio button we will get the binded value of bean. It is one column. NOTE: Please remove all spaces after : sign. In f and h tags.

<h:column>
	<f:facet name="header">
		<f:verbatim>Select</f:verbatim>
	</f:facet>
	<h:selectOneRadio id="selectRadio" value="#{depositMoneyPageBean.creditCardDataBean.cardId}"
		valueChangeListener="#{depositMoneyPageBean.handleRadioValueChange}"
		οnclick="selectOne(this.form , this)" >
		<f:selectItem itemValue="#{creditCardData.cardId}" itemLabel=" " />
	</h:selectOneRadio>
</h:column>

 

 Backing Bean code

This is the backing bean code, and here is the valueChangeListener method:

public void handleRadioValueChange(ValueChangeEvent valueChangedEvent){
try	{
// here we got the selected row of dataTable
this.creditCardDataBean = (CreditCardDataBean)getTable1().getRowData();
selectedCardId = creditCardDataBean.getCardId();
}catch (Exception e){
e.printStackTrace();
}
}
public HtmlDataTable getTable1(){
if (table1 == null) {
table1 = (HtmlDataTable) findComponentInRoot("table1");
}
return table1;
}

public static UIComponent findComponentInRoot(String id) {
UIComponent ret = null;
FacesContext context = FacesContext.getCurrentInstance();
if (context != null) {
UIComponent root = context.getViewRoot();
ret = findComponent(root, id);
}
return ret;
}

public static UIComponent findComponent(UIComponent base, String id) {

// Is the "base" component itself the match we are looking for?
if (id.equals(base.getId())) {
return base;
}

// Search through our facets and children
UIComponent kid = null;
UIComponent result = null;
Iterator kids = base.getFacetsAndChildren();
while (kids.hasNext() && (result == null)) {
kid = (UIComponent) kids.next();
if (id.equals(kid.getId())) {
result = kid;
break;
}
result = findComponent(kid, id);
if (result != null) {
break;
}
}
return result;
}