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
hamayoun65hamayoun65 

Radio Buttons in data table

Hi

I want to create a table which has, as it's last column, a radio button so that the user can select one item from the table.  So in this example fro the user guide:

<apex:page controller="dataTableCon" id="thePage">
 <apex:dataTable value="{!accounts}" var="account" id="theTable" rowClasses="odd,even" styleClass="tableClass">
  <apex:facet name="caption">table caption</apex:facet>
  <apex:facet name="header">table header</apex:facet>
  <apex:facet name="footer">table footer</apex:facet>
  <apex:column>
          <apex:facet name="header">Name</apex:facet>
   <apex:facet name="footer">column footer</apex:facet>
   <apex:outputText value="{!account.name}"/>
  </apex:column>
  <apex:column>
   <apex:facet name="header">Owner</apex:facet>
   <apex:facet name="footer">column footer</apex:facet>
   <apex:outputText value="{!account.owner.name}"/>
  </apex:column>
 </apex:dataTable>

I want to add one more column and out a radio button in it, so that the user can select one Account.  But there is no 'inputRadio' apex tag.  There is a 'inputCheckbox' radio tag, but I want it to be a radio button.  

Any ideas?

Thx,
Hamayoun
</apex:page>

jwetzlerjwetzler
There is a selectRadio component but as far as I know it's not possible to put this into a table the way you're wanting to do it.  I would use inputCheckbox for each one and then use javascript to deselect all other checkboxes whenever one is selected.
hamayoun65hamayoun65
Thanks very much Jill.  But how exactly do we add the JavaScript?  This is what the documentation says about inputCheckbox:

onclick The JavaScript invoked if the onclick event occurs--that is, if the user clicks the checkbox.String

What is the value of the "onclick" atrribute?  Is it JavaScript itself, or the name of a JavaScript function?  If it's the latter, can we pass parameters into the function?   And how do you pull in a JavaScript snippet into a VF page?

Thx,
Hamayoun
jwetzlerjwetzler
You will want to look at some basic javascript tutorials if that's the route you want to go.  onclick is the same javascript attribute you can add to regular html tags, so you use it the same way.  javascript functions can be included on your page either by using <script> tags or using static resources to upload your javascript files.
TLFTLF

Hi hamayoun65. Take a look at the code I posted in this message. I think it does exactly what you want: http://community.salesforce.com/sforce/board/message?board.id=Visualforce&thread.id=2833

There is an inputCheckbox in the left-most column of each row. The javascript function in the page insures that only one row is selected at a time.
hamayoun65hamayoun65
Thx TLF, exactly what I need!
hamayoun65hamayoun65
TLF, is this working for you?  You seem to indicate in your post that it isn't.
TLFTLF

The basic functionality of having a single-select checkbox in a column of the datatable is working. The problem I was having in my original post was trying to respond to user selection by updating a different part of my page depending on which row was selected. Hope this helps.

TLF
GoForceGoGoForceGo
I am trying to use the deselectOther javascript function.

My underlying data has a row that was already selected before the table is displayed for the first time (the primary flag). As a result, if I select another row, the original row is NOT deselected. Obviously the "selectedChkBox" variable is not initialized when the table is initially rendered.

Any ideas? I would like to initialize the selectedChkbox variable when the table is first loaded.


Code:
<apex:page controller="selectPreferredDistributorsController" tabStyle="Distributor__c">
    <script>          
        var selectedChkbox;      
        function deSelectOthers(chkBox) {
            if (chkBox.checked) {
                if ((chkBox != selectedChkbox) && (selectedChkbox != null)) {
                    selectedChkbox.checked = false;
                }
                selectedChkbox = chkBox;
            }            
        }         
    </script>  
    <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:pageBlockSection Title="Select Preferred Distributors" columns="1">
            <!-- show the Table with selection -->
            <apex:pageBlockTable value="{!PreferredDistributorWithSelects}" var="pd" id="tasktable" frame="border">
                <apex:column headerValue="Select"> 
                    <apex:inputCheckBox value="{!pd.selected}">
                        <apex:actionSupport event="onchange" rerender="primaryCheckBox" />
                    </apex:inputCheckBox>
                </apex:column>               
                <apex:column value="{!pd.pDistributor.name}" />
                 <apex:column headerValue="Primary Distributor"> 
                    <apex:inputCheckBox value="{!pd.primary}" id="primaryCheckBox" disabled="{!NOT(pd.selected)}" onclick="deSelectOthers(this)" />
                </apex:column>
            </apex:pageBlockTable>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
    
</apex:page>

 


12-18-2008 02:25 PM
Manan_ShahManan_Shah

I want the same as you have asked in your post.

I am using PageBLockTable to dispaly more than one record.

And User have to select one record to process further.

But in VF, redio button can't be used with PageBlockTable, So I have to use inputCheckBox which I have used.

Now, how I can be able to select only one record using inputCheckBox using JS?

Can anybody help me??

 

Here is my Code::

 

 

<apex:pageBlockTable value="{!lstWRPtrainDetails}" var="c"  rendered="{!flag}" >
      <apex:column >
            <apex:inputCheckbox value="{!c.selectedTrain}" id="CheckBox" onclick="SelectedOne(this)" > 
            </apex:inputCheckbox>
        </apex:column>
      <apex:column value="{!c.trainNo}" headerValue="Train No"/>
      <apex:column value="{!c.trainName}" headerValue="Train Name" />
      <apex:column value="{!c.fromStation}" headerValue="Origin" />
      <apex:column value="{!c.departureTime}" headerValue="Departure Time" />
      <apex:column value="{!c.toStation }" headerValue="Destination" />
      <apex:column value="{!c.arrivalTime}" headerValue="Arrival Time" />
      <apex:column value="{!c.travelTime}" headerValue="Travel Time" />
      <apex:column value="{!c.totalFare}" headerValue="Total Fare" />
    </apex:pageBlockTable>

 

 
TLFTLF

 

<script>
var selectedId;

function SelectedOne(checkbox) {
    if (selectedId) {
       var prevCheckbox = document.getElementById(selectedId);
       if (prevCheckbox) {
          prevCheckbox.checked = false;
       }
    }
    selectedId = checkbox.Id;
}
<script>

 

I think you just need to add something like the preceding code to your page.

 
Jatin.jainJatin.jain

I believe , its still possible with using input type radio button.

1. Create input type radio buttom under apex:column for the data/ pageblock table

2. Create a apex:hidden field which will bind to the controller variable with some id.

3. Write an onclick event on the radio button, wherein you would pass the id of the record and set it onto the hidden field.

4. Let the request go to the server. It would always take the latest value bind with the variable.

 

Let me know in case if you face any issues.

 

Cheers 

JJ
Pragyan NayakPragyan Nayak
how to do the same thing in lwc?