function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
GoForceGoGoForceGo 

Showing Radio Button instead of CheckBox in Visual Force

I have a table and only one row can possibly be selected.

Right now I have a wrapper class and a field called selected which is selected through a checkbox in VF UI.

I want to show a radio button instead.

Anyway to do it?





Message Edited by GoForceGo on 12-19-2008 12:39 AM
JeremyKraybillJeremyKraybill
Use the selectRadio component. When you're looking for basic components like this, the best place to start is always the "Standard Component Reference" in the VF developer guide, it has good documentation on every component.

Jeremy Kraybill
Austin, TX
BrianWKBrianWK
If you get your RadioSelect buttons to work in a datatable - I'll be interested in seeing your code. My last attempt successully put my radio button in the datatable, but I could fill in multiple options (each row could be selected). I tried some various code but ultimately ended up with a javascript and checkboxes
GoForceGoGoForceGo
Thanks guys.

Brian, as you said trying to fit selectRadio within a table seems painful. I went with select check box and Javascript to allow only one to be selected.

However, I still have the problem when there is an entry that is already selected (i.e the database already has a selected entry against it) - the Javascript doesn't work properly - it works if none of the entries are selected on the page initially.

Here is the link where I post my code.
hisrinuhisrinu
Hi,

I guess this link might be useful for you.

 http://wiki.apexdevnet.com/index.php/Wrapper_Class

All the best.
GoForceGoGoForceGo
I am already doing this...I am just wondering how to make the select box a radio box...
GoForceGoGoForceGo
The following code does the job.

The basic idea is to use the input of type radio and set the inputhidden variable to be the row that has been selected.

My example is more complicated - the first column of the table has a select box that allows a distributor to be selected.

Out of the selected distributors, one of them can be set as primary.

Code:
<apex:page controller="selectPreferredDistributorsController" tabStyle="Distributor__c" id="thePage">
    <apex:form id="theForm">
        <apex:sectionHeader title="Select Preferred Distributors" />
        <apex:pageBlock >
            <apex:pageBlockButtons >
                <apex:commandButton action="{!Save}" value="Save" />
                <apex:commandButton action="{!Cancel}" value="Cancel" /> 
            </apex:pageBlockButtons>
            <apex:outputPanel id="refreshPanel">
            <apex:inputHidden value="{!primaryDistributor}" id="pDistributor"/> 
            <script> var jspDistributor = document.getElementById("{!$Component.pDistributor}"); </script>           
            <!-- show the Table with selection -->
            <apex:pageBlockTable value="{!PreferredDistributorWithSelects}" var="pd" id="theTable" frame="border">
                <apex:column headerValue="Select"> 
                    <apex:inputCheckBox value="{!pd.selected}">
                        <apex:actionSupport action="{!uncheckPrimaryIfChecked}" event="onclick" rerender="refreshPanel"/>
                    </apex:inputCheckBox>
                </apex:column>               
                <apex:column value="{!pd.pDistributor.name}" />
                <apex:column headerValue="Primary Distributor" id="primaryColumn"> 
                    <input type = "radio" name = "primary" onclick="setPreferredDistributor(this)" value="{!pd.pDistributor.id}" {!IF(primaryDistributor=pd.pDistributor.id,'checked=\"checked\"',null)} {!IF(NOT(pd.selected),'disabled=\"disabled\"',null)} />              
                </apex:column> 
            </apex:pageBlockTable>
            </apex:outputPanel> 
        </apex:pageBlock> 
    </apex:form> 
     <script>
       function setPreferredDistributor(radioBtn) {
            if (radioBtn.checked) {
                alert('setting distributor ' + jspDistributor);
                jspDistributor.value = radioBtn.value;  
            }            
        }
    </script>
</apex:page>

 
kumgaurav1.3959431011250151E12kumgaurav1.3959431011250151E12
Hi GoForceGO,

I tried to sample code line
<input type = "radio" name = "primary" onclick="setPreferredDistributor(this)" value="{!pd.pDistributor.id}" {!IF(primaryDistributor=pd.pDistributor.id,'checked=\"checked\"',null)} {!IF(NOT(pd.selected),'disabled=\"disabled\"',null)} />
but its giving compilation error, can you put some more info about it.