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 SoulutionThe 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>

About these ads

May 29, 2009 - Posted by | Java Server Faces

13 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

    • hey phil,
      I was going through this page and saw that you had same problem which I am having right now.
      I am trying to learn how the to select the table row when the radio button is selected while using <ice:radio
      in data table. Any idea? Thanks You

      Comment by Sunny | July 6, 2012 | 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

  7. Hi HobiOne,

    I am curious- are you able to display the “radioChanged” method from your testbean? (also radioItems wud be great too) Thank you.

    brdudley

    Comment by brdudley | January 7, 2010 | Reply

    • <ice:column style="width: 10px">
      					<f:facet name="header"></f:facet>
      					<ice:panelGroup
      						style="padding: 5px; text-align: center;border:0px solid #ABABAB;"
      						rendered="#{!trainingClassDTO.checked}">
      						<h:commandButton id="commandButtonYellow"
      							actionListener="#{traineeForm.showTrainingClassSessions}"
      							value="#{trainingClassDTO}" image="../images/searchYellow.jpg"
      							style="width: 25; vertical-align: middle;"
      							alt="Click to see sessions" />
      					</ice:panelGroup>
      					<ice:panelGroup id="panelGroup"
      						style="padding: 5px; text-align: center;border:0px solid #ABABAB;"
      						rendered="#{trainingClassDTO.checked}">
      						<h:commandButton id="commandButtonRed"
      							actionListener="#{traineeForm.showTrainingClassSessions}"
      							value="#{trainingClassDTO}" image="../images/viewRed.jpg"
      							style="width: 25; vertical-align: middle;"
      							alt="Click to see sessions" />
      					</ice:panelGroup>
      				</ice:column>
      
      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;
      		}
      	}
      

      Comment by HobiOne | January 7, 2010 | Reply

  8. Thanks Hobione, looks like you display showTrainingClassSessions. But I still am not seeing “radioChanged” method. Anyway you could post that one? Thank you.

    Comment by brdudley | January 10, 2010 | Reply

  9. Hi,

    Could you provide the code for solution # 1. i.e. commandlink

    Thanks

    Comment by ponic | November 25, 2010 | Reply

  10. [...] dataTable and radio button in JSF May 2009 11 comments 5 [...]

    Pingback by 2010 in blog review « Hobione's Weblog | January 7, 2011 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: