Radiobutton in a Datatable in Visualforce Page
9:21 PMAs the title of the article implies, in this post we will be seeing an example which uses radio button in a table in visualforce and allows selecting one of the records in the table.
You can see a demo of the example here - Click here (forcetreedemos)
Visualforce Page:
Apex Class: RadioButton
You can see a demo of the example here - Click here (forcetreedemos)
Visualforce Page:
<apex:page controller="RadioButton" showheader="false">
<apex:form>
<apex:pageblock id="allcons" title="Available Contacts">
<apex:pageblocktable id="allcons" value="{!AllContacts}" var="allcon">
<apex:column headervalue="Set as Primary">
<apex:actionsupport action="{!selectcon}" event="onclick" rerender="consel,allcons">
<input type="radio" />
<apex:param name="conid" value="{!allcon.Id}">
</apex:param></apex:actionsupport>
</apex:column>
<apex:column headervalue="Last Name">
<apex:outputfield value="{!allcon.LastName}">
</apex:outputfield></apex:column>
<apex:column headervalue="First Name">
<apex:outputfield value="{!allcon.FirstName}">
</apex:outputfield></apex:column>
<apex:column headervalue="Email">
<apex:outputfield value="{!allcon.Email}">
</apex:outputfield></apex:column>
<apex:column headervalue="Phone">
<apex:outputfield value="{!allcon.Phone}">
</apex:outputfield></apex:column>
</apex:pageblocktable>
</apex:pageblock>
<apex:pageblock id="consel" title="Selected Contact">
<apex:pageblocktable id="allcons" value="{!selectedContact}" var="selcon">
<apex:column headervalue="Last Name">
<apex:outputfield value="{!selcon.LastName}">
</apex:outputfield></apex:column>
<apex:column headervalue="First Name">
<apex:outputfield value="{!selcon.FirstName}">
</apex:outputfield></apex:column>
<apex:column headervalue="Email">
<apex:outputfield value="{!selcon.Email}">
</apex:outputfield></apex:column>
<apex:column headervalue="Phone">
<apex:outputfield value="{!selcon.Phone}">
</apex:outputfield></apex:column>
</apex:pageblocktable>
</apex:pageblock>
</apex:form>
</apex:page>Apex Class: RadioButton
public class RadioButton {
List<contact> selectcon;
Public List<contact> getAllContacts()
{
List<contact> allcons = [Select Id,FirstName,LastName,Email,Phone from Contact limit 5];
return allcons;
}
Public void selectcon()
{
String selcontactid = System.currentPagereference().getParameters().get('conid');
Contact con = [Select Id,FirstName,LastName,Email,Phone from Contact where Id=:selcontactid];
selectcon = new List<contact>();
selectcon.add(con);
}
Public List<contact> getselectedContact()
{
return selectcon;
}
}
12 comments
Great post, I'm a big fan of your site - you may want to consider only rerending the "consel" pageBlock, because currently it rerenders 'consel,allcons' and rerendering allcons causes the radio button that was selected to be de-selected.
ReplyDeleteHey.. First of all, thanks a lot for following this blog.. The reason i rerendered both the 'consel,allcons' section was, if you don't do so the radio button shows as selected and the next time you select another radio button the previous one will still show as selected.. So, the table can display all radio options as selected which is weird when radio buttons are ideally meant to select only one from a list.. I hope you can address this issue with a little more javascript magic.. Thanks for pointing this out, will try and post the cost
ReplyDelete*code ... misspelled the last word... You're welcome to share your solution if you find one
ReplyDeletethanks for this useful post
ReplyDeletebut can we same thing using radio button.
here is my code...........
Page..
< innput type="radio" name = "selectedContact" >
Controller...
public class RadioButton {
public RadioButton(ApexPages.StandardController controller) {
}
public Contact con;
public Account acc;
public String selcontactid;
Public List getAllContacts()
{
acc = [select id,primary_contact__c from account where id = :Apexpages.currentPage().getParameters().get('id')];
List allcons = [Select Id,FirstName,LastName,Email,Phone from Contact where accountId = :Apexpages.currentPage().getParameters().get('id')];
return allcons;
}
Public void selectCon()
{
selcontactid = System.currentPagereference().getParameters().get('conid');
}
public pageReference save(){
acc.primary_contact__c = selcontactid ;
update acc;
return back();
}
public pageReference back()
{
PageReference acctPage = new ApexPages.StandardController(acc).view();
acctPage.setRedirect(true);
return acctPage;
}
}
input tag is not closed
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteTo Solve the Radio button Selection and de-selection problem just make the two changes in above mentioned code:
ReplyDelete1. Add Attribute name="contact" to "input" tage
2. Remove rerender="consel,allcons" to rerender="consel" in "apex:actionsupport" tag
It will work fine. Let me know if still problem is there.
name thing fixes the selection/de-selection thing. Though such small thing, but your note helped to recall the same. Thank you Jayant and Thank you Edwin for the detailed post.
DeleteI'm new to visualforce,it really helped me do one task of my assignments :) .Thank's for sharing your knowledge !!!
ReplyDeleteThanks it helped for me
ReplyDeleteThanks It is a great post that helped me so much. Your examples are really helpful.
ReplyDeleteI want to select record and i want to save under parent object..But i tried using this code its not working I need to select only one radio button.
ReplyDelete