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 Soulution:  The 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>

Possibly related posts: (automatically generated)

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

7 Comments »

  1. HobiOne:

    Nice blog. Thanks for all the pointers. Any chance you would be willing to post (or email) the backing bean to your dataTable and radio button in JSF/ICEFaces solution? Thank you.

    Sincerely,
    Phil

    Comment by Phil | August 4, 2009 | Reply 

  2. package info.aaa.amc.nas.hrtrainingview.bean.backing;

import javax.faces.component.UICommand;
import javax.faces.event.ActionEvent;

import info.aaa.amc.nas.hrtrainingservice.dto.TrainingClassDTO;
import info.aaa.amc.nas.hrtrainingview.bean.model.TrainingClassListModel;

public class TrainingClassList {

	private TrainingClassForm trainingClassForm;
	private TrainingClassListModel trainingClassListModel;
	private TrainingClassEditor trainingClassEditor;

	public void checkAll(ActionEvent actionEvent) {
		getTrainingClassListModel().checkAll();
	}

	public String create() {
		getTrainingClassListModel().setSelectedAsNew();
		//getTrainingClassEditor().setFormRendered(true);
		//System.out.println("goToTrainingClassXHTML --" +getTrainingListModel().getSelected());
		return "goToTrainingClassXHTML";
	}
	/*public String clearTrainingClassForm(){ // does not work, dont know why
		System.out.println("---> clearTrainingClassForm method got invoked");
		String goTo = "goToTrainingClassXHTML";
		return goTo;
	}*/

	public void deleteChecked(ActionEvent actionEvent) {
		getTrainingClassListModel().deleteChecked();
	}

	public void edit(ActionEvent actionEvent) {
		UICommand uiCommand = (UICommand)actionEvent.getComponent();
		TrainingClassDTO trainingClassDTO = (TrainingClassDTO)uiCommand.getValue();
		getTrainingClassListModel().setSelected(trainingClassDTO);
		getTrainingClassEditor().setFormRendered(true);
	}

	public void uncheckAll(ActionEvent actionEvent) {
		getTrainingClassListModel().uncheckAll();
	}	 

	// **************Getter and Setter ***************************
	public TrainingClassForm getTrainingClassForm() {
		return trainingClassForm;
	}
	public void setTrainingClassForm(TrainingClassForm trainingClassForm) {
		this.trainingClassForm = trainingClassForm;
	}
	public TrainingClassListModel getTrainingClassListModel() {
		return trainingClassListModel;
	}
	public void setTrainingClassListModel(TrainingClassListModel trainingClassListModel) {
		this.trainingClassListModel = trainingClassListModel;
	}

	public TrainingClassEditor getTrainingClassEditor() {
		return trainingClassEditor;
	}

	public void setTrainingClassEditor(TrainingClassEditor trainingClassEditor) {
		this.trainingClassEditor = trainingClassEditor;
	}

}//close class

    Comment by HobiOne | August 4, 2009 | Reply

  3. Thanks HobiOne.

    But I don’t see the method radioChanged() called in the jspx at line 9. What I am trying to learn is how the to select the table row when the radio button is selected. Any ideas? Thank you.

    Phil

    Comment by Phil | August 5, 2009 | Reply

  4. Phil:
    Sorry, I posted the wrong bean. Here it is.

    package info.aaa.amc.nas.hrtrainingview.bean.backing;

import info.aaa.amc.nas.hrtrainingservice.dto.TraineeLookupDTO;
import info.aaa.amc.nas.hrtrainingservice.dto.TrainingClassDTO;
import info.aaa.amc.nas.hrtrainingservice.dto.TrainingSessionsDTO;
import info.aaa.amc.nas.hrtrainingview.bean.model.TraineeListModel;
import info.aaa.amc.nas.hrtrainingview.bean.model.TrainingSessionsListModel;
import info.aaa.amc.nas.hrtrainingview.bean.support.TraineeLookupSupport;

import javax.faces.component.UICommand;
import javax.faces.component.UIInput;
import javax.faces.component.UIViewRoot;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import javax.faces.event.ValueChangeEvent;

import com.icesoft.faces.context.effects.Effect;
import com.icesoft.faces.context.effects.Highlight;

public class TraineeForm {

	private TrainingClassDTO trainingClassDTOOld;
	private TrainingSessionsListModel trainingSessionsListModel;
	private boolean visiableTrainingSession = false;
	private String trainingClassName;
	private TrainingSessionsDTO trainingSessionsDTO;
	private boolean popupForm = false;
	private Highlight effectOutputText;
	private TraineeListModel traineeListModel;
	private TraineeList traineeList;
	private TraineeLookupSupport traineeLookupSupport;

	public TraineeForm() {
		this.effectOutputText = new Highlight("#9933ff");
	}	

	public void showTrainingClassSessions(ActionEvent actionEvent) {

		UICommand uiCommand = (UICommand) actionEvent.getComponent();
		TrainingClassDTO trainingClassDTOCurrent = (TrainingClassDTO) uiCommand
				.getValue();

		if (trainingClassDTOOld == null) { // first time
			trainingClassDTOCurrent.setChecked(true);
			this.visiableTrainingSession = true;
			Integer id = trainingClassDTOCurrent.getId();
			String className = trainingClassDTOCurrent.getClassName();
			this.showTrainingSessionsPerTrainingClass(id, className);
			trainingClassDTOOld = trainingClassDTOCurrent;
		} else {
			// this.isVisiable = false;
			trainingClassDTOOld.setChecked(false);
			trainingClassDTOCurrent.setChecked(true);
			this.showTrainingSessionsPerTrainingClass(trainingClassDTOCurrent
					.getId(), trainingClassDTOCurrent.getClassName());
			// this.isVisiable = true;
			trainingClassDTOOld = trainingClassDTOCurrent;
		}
	}

	public void showTrainingSessionsPerTrainingClass(Integer trainingClassId,
			String className) {
		this.trainingClassName = className;
		this.trainingSessionsListModel
				.setListDataModelEnrollment(trainingClassId);
		this.effectOutputText = new Highlight("#ffff99");
	}

	public void showTrainingSignupForm(ActionEvent actionEvent) {

		UICommand uiCommand = (UICommand) actionEvent.getComponent();
		this.trainingSessionsDTO = (TrainingSessionsDTO) uiCommand.getValue();
		this.trainingSessionsDTO.setChecked(true);
		this.popupForm = true;
		this.getTraineeList().create();

	}

	public void closeModalPopUp(ActionEvent actionEvent) {
		this.popupForm = false;
		this.trainingSessionsDTO.setChecked(false);
	}

	public void saveModalPopUp(ActionEvent actionEvent){
		this.getTraineeListModel().saveSelected();
		this.popupForm = false;
		this.trainingSessionsDTO.setChecked(true);
		this.getTraineeList().create();
	}

	public void traineeLookupListener(ValueChangeEvent valueChangeEvent){
		FacesContext facesContext = FacesContext.getCurrentInstance();
		UIViewRoot uiViewRoot = facesContext.getViewRoot();
		String traineeNameStartsWith = (String)valueChangeEvent.getNewValue();
		this.getTraineeLookupSupport().filterSelectItems(traineeNameStartsWith);
		TraineeLookupDTO traineeLookupDTO = this.getTraineeLookupSupport().getTraineeByName(traineeNameStartsWith);

		if(traineeLookupDTO != null){
			UIInput traineeInputLastNameText = (UIInput)uiViewRoot.findComponent("modalForm:lastName");
			traineeInputLastNameText.setSubmittedValue(traineeLookupDTO.getLastName());
			String lastName = traineeLookupDTO.getLastName();
			traineeInputLastNameText.setValue(traineeLookupDTO.getLastName());

			UIInput traineeInputFirstNameText = (UIInput)uiViewRoot.findComponent("modalForm:firstName");
			traineeInputFirstNameText.setSubmittedValue(traineeLookupDTO.getFirstName());
			traineeInputFirstNameText.setValue(traineeLookupDTO.getFirstName());			

			UIInput traineeInputEmailText = (UIInput)uiViewRoot.findComponent("modalForm:email");
			traineeInputEmailText.setSubmittedValue(traineeLookupDTO.getEmail());
			traineeInputEmailText.setValue(traineeLookupDTO.getEmail());

			UIInput traineeInputPhoneNumberText = (UIInput)uiViewRoot.findComponent("modalForm:phoneNumber");
			traineeInputPhoneNumberText.setSubmittedValue(traineeLookupDTO.getPhoneNumber());
			traineeInputPhoneNumberText.setValue(traineeLookupDTO.getPhoneNumber());

			UIInput traineeInputRoutingSymbolText = (UIInput)uiViewRoot.findComponent("modalForm:routingSymbol");
			traineeInputRoutingSymbolText.setSubmittedValue(traineeLookupDTO.getRoutingSymbol());
			traineeInputRoutingSymbolText.setValue(traineeLookupDTO.getRoutingSymbol());

			UIInput traineeInputFAAContactText = (UIInput)uiViewRoot.findComponent("modalForm:faaCont");
			traineeInputFAAContactText.setSubmittedValue(traineeLookupDTO.getFaaCont());
			traineeInputFAAContactText.setValue(traineeLookupDTO.getFaaCont());

		}
	}

	// *********** Getter and Setter *********************************
	public TrainingSessionsListModel getTrainingSessionsListModel() {
		return trainingSessionsListModel;
	}

	public void setTrainingSessionsListModel(
			TrainingSessionsListModel trainingSessionsListModel) {
		this.trainingSessionsListModel = trainingSessionsListModel;
	}

	public boolean isVisiableTrainingSession() {
		return visiableTrainingSession;
	}

	public void setVisiable(boolean isVisiableTrainingSession) {
		this.visiableTrainingSession = isVisiableTrainingSession;
	}

	public boolean isPopupForm() {
		return popupForm;
	}

	public void setPopupForm(boolean popupForm) {
		this.popupForm = popupForm;
	}

	public String getTrainingClassName() {
		return trainingClassName;
	}

	public void setTrainingClassName(String trainingClassName) {
		this.trainingClassName = trainingClassName;
	}

	public TrainingSessionsDTO getTrainingSessionsDTO() {
		return trainingSessionsDTO;
	}

	public void setTrainingSessionsDTO(TrainingSessionsDTO trainingSessionsDTO) {
		this.trainingSessionsDTO = trainingSessionsDTO;
	}

	public Effect getEffectOutputText() {

		return effectOutputText;
	}

	public void setEffectOutputText(Effect effectOutputText) {
		this.effectOutputText = (Highlight) effectOutputText;
	}

	public TraineeListModel getTraineeListModel() {
		return traineeListModel;
	}

	public void setTraineeListModel(TraineeListModel traineeListModel) {
		this.traineeListModel = traineeListModel;
	}

	public TraineeList getTraineeList() {
		return traineeList;
	}

	public void setTraineeList(TraineeList traineeList) {
		this.traineeList = traineeList;
	}

	public TraineeLookupSupport getTraineeLookupSupport() {
		return traineeLookupSupport;
	}

	public void setTraineeLookupSupport(TraineeLookupSupport traineeLookupSupport) {
		this.traineeLookupSupport = traineeLookupSupport;
	}

}// close class

    Comment by HobiOne | August 5, 2009 | Reply

    • i think you the put the wrong backing bean again :D

      Comment by lass | October 7, 2009 | Reply

  5. It’s very easy with PrimeFaces, just add a p:column with selection=”single”. That column will render radios which can assign the selected row to a backing bean.

    Comment by cagataycivici | October 5, 2009 | Reply

  6. Awesome. Love the Growl component of PrimeFaces.

    Comment by HobiOne | October 5, 2009 | Reply


Leave a comment

« Previous | Next »