[SalesForce] account list as radio button options in VF page

I have the below VF page where I am trying to list the account and contact details as radio button options:

<apex:page standardController="Account" recordSetVar="accounts">
    <apex:form >



<apex:pageBlock title="Account List" id="account_list">


<table>
  <apex:repeat value="{!accounts }" var="acc">
    <tr> 
      <td>
       <apex:selectRadio layout="pageDirection">
      <apex:selectOptions value="{!acc.Name}"/>
      </apex:selectRadio >
      </td>
    </tr>
  </apex:repeat>
</table>


<h1> Contacts</h1>

<table>
  <apex:repeat value="{!accounts }" var="acc">
    <tr> 
      <apex:repeat value="{!acc.Contacts}" var="cont">
      <td><apex:outputText value="{!cont.Name}"/></td>
      </apex:repeat>
    </tr>
  </apex:repeat>
</table>


</apex:pageBlock>

    </apex:form>
</apex:page>

When I preview I get an error which says Invalid selectOptions found. Use SelectOption type in Apex. I would like to display the list of account and I should I able to use radio button to select a particular account. How can achieve this?

Best Answer

You may need to create a SelectOption list using a controller extension, something like this:

public List<SelectOption> getItems() {
  List<SelectOption> options = new List<SelectOption>(); 
  for (Account a : myAccountsList) {
    options.add(new SelectOption(a.Id, a.Name))
  }

  return options; 
}

Then you add the options to your <apex:selectRadio> tag thusly:

<apex:selectRadio>
  <apex:selectOptions value="{!items}" />
</apex:selectRadio>

See also the documentation on apex:selectRadio.

Related Solutions

[SalesForce] Radio button – visualforce

Have you tried display:block?

E.g.:

<apex:page >
<style type="text/css">
#myRadio label { display:block; }
</style>
<div id="myRadio">
 <apex:form >
    <apex:selectRadio >
        <apex:selectOption itemValue="red" itemLabel="Red" id="redOption"/>
        <apex:selectOption itemValue="blue" itemLabel="Blue" id="blueOption"/>
    </apex:selectRadio>
 </apex:form>
</div>     
</apex:page>

upd it works for me with selectOptions from controller as well but is not very pretty: enter image description here Did you consider changing radio layout attribute to "pageDirection" instead?

[SalesForce] All radio button get selected at same time

What you want here is one <apex:selectRadio> element with multiple <apex:selectOption/> elements grouped inside. Instead, you have multiple <apex:selectRadio> elements each with a single <apex:selectOption/> element, which is basically creating multiple groups of one radio button.

If you change your code to:

<apex:selectRadio>
  <apex:repeat value="{!accounts}" var="account">
    <apex:selectOption itemValue="{!account.Id}" itemLabel="{!account.Name}" />
  </apex:repeat>
</apex:selectRadio>

it should solve the problem.

UPDATE:

I just saw your other question about this. If the above doesn't work, you may need to create a SelectOption list using a controller extension, something like this:

public List<SelectOption> getItems() {
  List<SelectOption> options = new List<SelectOption>(); 
  for (Account a : myAccountsList) {
    options.add(new SelectOption(a.Id, a.Name))
  }

  return options; 
}