2

i am trying to select only one radio button from a table which has been built by <apex:repeat control. Now the issue is, user can select all of the radio buttons in a logical group of radio buttons. Is that possible to select only one radio button from each group.

For example, in the below example, University of Arizona have 3 radio buttons and i need to select only one from that group. The same with TRIMAX world. If the user accidentally selects more than one, then it should toggle all other radio buttons in the group. Is that possible? Please suggest.

Screen shot of the table using repeat:

enter image description here

From the Inspect Element tool of Firefox, i was able to get these id's for the radio buttons for University of Arizona and TRIMAX world. I understand from this

j_id0:j_id1:j_id3:9:j_id5:0

j_id3:9 is the row number and j_id5:0 is the first radio button in that group.

University of Arizona:

j_id0:j_id1:j_id3:9:j_id5:0 j_id0:j_id1:j_id3:9:j_id5:1 j_id0:j_id1:j_id3:9:j_id5:2

TRIMAX world

j_id0:j_id1:j_id3:11:j_id5:0 j_id0:j_id1:j_id3:11:j_id5:1

Visualforce Page:

<apex:page Controller="MasterDataSyncController">
<apex:form >
    <table border="1" >
        <thead>
            <tr>
                <th colspan="7">SFDC</th>
                <th colspan="8">SAP</th>
                <th colspan="2">Action</th>
            </tr>
            <tr>
                <th>Account Name</th>
                <th>Street Address</th>
                <th>City</th>
                <th>State</th>
                <th>Zip</th>
                <th>Phone No</th>
                <th>Fax No</th>
                <th>Customer #</th>
                <th>Name</th>
                <th>Street Address</th>
                <th>City</th>
                <th>State</th>
                <th>Zip</th>
                <th>Phone No</th>
                <th>Fax No</th>
                <th>GSS Reco's</th>
                <th>Manual Override</th>
            </tr>
        </thead>

        <apex:repeat var="SAPSFDC" value="{!SFDCSAP}">

        <tr>

            <td>{!SAPSFDC.AccountName}</td>

            <td>{!SAPSFDC.Telephone}</td>

            <td>{!SAPSFDC.Fax}</td>

            <td>TBD</td>
            <td>TBD</td>

            <td>TBD</td>

            <td>TBD</td>

            <td colspan="8"> <table border="1">
                    <apex:repeat var="SAPData" value="{!SAPSFDC.lstSAPData}"> 
                        <tr>

                        <td>{!SAPData.CustomerNo}</td>
                        <td>{!SAPData.CustomerName}</td>
                        <td>Street Address</td>
                        <td>City</td>
                        <td>State</td>
                        <td>Zip</td>
                        <td>{!SAPData.Telephone}</td>
                        <td>{!SAPData.Fax}</td>
                        <td>
                            <apex:selectRadio id="GSS" value="{!SAPData.SAPSFDCKey}" rendered="{!SAPData.GSSRecomm}" onClick="alert('{!$Component.GSS}');">
                                <apex:selectOption itemValue="{!SAPData.SAPSFDCKey}"/>
                            </apex:selectRadio>
                            &nbsp;&nbsp;
                        </td>
                        <td>
                            <apex:selectRadio id="Manual" rendered="{!if(!SAPData.GSSRecomm,true,false)}" onClick="alert('{!$Component.Manual}');">
                                <apex:selectOption itemValue="{!SAPData.SAPSFDCKey}"/>
                            </apex:selectRadio>
                            &nbsp;&nbsp;
                        </td>

                        </tr>                   
                    </apex:repeat></table></td>
        </tr>

        </apex:repeat> 

    </table>
</apex:form>
  • Can you try using simple HTMl tag for radio button instead of using <apex:selectRadio> and use <apex:actionSupport> inside HTML tag and also very important, please bind the HTML tag with some controller property – tandonprateek Aug 2 '14 at 15:24
  • Refer the link - salesforce.stackexchange.com/questions/57990/… – MIX DML Aug 9 '15 at 7:44
1

The straight HTML option looks like this:

<apex:form id="theTable" >
    ....other components.
    <apex:repeat value="{!options}" var="option">
        <input id="num_{!option}"  name="{!SAPData.CustomerName}" type="radio" />
        <label for="num_{!option}" onclick="saveOptionJS({!option})" >{!option}</label>
    </apex:repeat>

By using the SAPData.CustomerName you make the name of this set of inputs unique, so when you select one of the options, the others of this name will be unselected.

Finally, you need to send this data to the controller:

<apex:actionFunction name="saveOptionJS"  action="{!saveOptionApex}" rerender="theTable" >
    <apex:param name="option" assignTo="{!option}" value="" />
</apex:actionFunction>

You'll probably need to send two parameters to the controller - something like {!SAPData.CustomerNo} also so you can work out in the controller which customer - option value you should select.

Note this code has not been compiled and will probably need some modification to fully meet your needs.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.