• Twinkle Garg 15
  • NEWBIE
  • 0 Points
  • Member since 2020

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 1
    Likes Given
  • 0
    Questions
  • 1
    Replies
My requirement is to display contact records so for every contact record displayed I need a radio button beside it.

I have done like so far.
@AuraEnabled
    Public static List<Contact> showContacts()
    {
      List<Contact> conList = [select Id,Name
                                 FROM 
                                 contact
                                 Order By name LIMIT 15];
        return conList;
    }

<aura:component implements="flexipage:availableForAllPageTypes" 
                controller="MyController"
                access="global" >
	
    <aura:attribute name="contacts"
                    type="List[]"
                    access="global"/>
    
    <aura:handler name="init"
                  value="{!this}"
                  action="{!c.doInit}"/>
    
    
    <table class="slds-table slds-table--bordered slds-table--cell-buffer">
        <thead>
            <tr class="slds-text-title--caps">
                <th scope="col">
                    <div class="slds-truncate" title="ContactName">Name</div>
                </th>
                
            </tr>
        </thead>
        
        <!--table body start, 
        Iterate contact list as a <tr> 
        -->
        <tbody>
            <aura:iteration items="{!v.contacts}" 
                            var="con">
                <tr>
                    <th scope="row">
                          <ui:inputRadio label="{!v.con}" change="{!c.onRadioChange}" />
                        <div class="slds-truncate" title="{!con.Name}">{!con.Name}</div>
                   </th>
                </tr>
            </aura:iteration>
           
        </tbody>
        
    </table>
    
</aura:component>

({
	doInit : function(component, event, helper) {
        helper.queryContacts(component,event,helper);
		
	},
    
    onRadioChange : function(component, event, helper) {
         // var selected = event.getSource().get("v.con");
        //alert(selected);
      }
})

({
	queryContacts : function(component,event,helper) {
		
        var action=component.get('c.showContacts');
        
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                
                component.set("v.contacts", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);

	}
})

<aura:application extends="force:slds"
                  access="global">
    
    <c:RadioButtons/>
    
</aura:application>
I am able to display radio button for every contact name but I am able to select multiple records.
I need to fire the change event when I select one contact record.

also other than <ui:radiobutton> what other component can we use?
thanks
sheila
 
My requirement is to display contact records so for every contact record displayed I need a radio button beside it.

I have done like so far.
@AuraEnabled
    Public static List<Contact> showContacts()
    {
      List<Contact> conList = [select Id,Name
                                 FROM 
                                 contact
                                 Order By name LIMIT 15];
        return conList;
    }

<aura:component implements="flexipage:availableForAllPageTypes" 
                controller="MyController"
                access="global" >
	
    <aura:attribute name="contacts"
                    type="List[]"
                    access="global"/>
    
    <aura:handler name="init"
                  value="{!this}"
                  action="{!c.doInit}"/>
    
    
    <table class="slds-table slds-table--bordered slds-table--cell-buffer">
        <thead>
            <tr class="slds-text-title--caps">
                <th scope="col">
                    <div class="slds-truncate" title="ContactName">Name</div>
                </th>
                
            </tr>
        </thead>
        
        <!--table body start, 
        Iterate contact list as a <tr> 
        -->
        <tbody>
            <aura:iteration items="{!v.contacts}" 
                            var="con">
                <tr>
                    <th scope="row">
                          <ui:inputRadio label="{!v.con}" change="{!c.onRadioChange}" />
                        <div class="slds-truncate" title="{!con.Name}">{!con.Name}</div>
                   </th>
                </tr>
            </aura:iteration>
           
        </tbody>
        
    </table>
    
</aura:component>

({
	doInit : function(component, event, helper) {
        helper.queryContacts(component,event,helper);
		
	},
    
    onRadioChange : function(component, event, helper) {
         // var selected = event.getSource().get("v.con");
        //alert(selected);
      }
})

({
	queryContacts : function(component,event,helper) {
		
        var action=component.get('c.showContacts');
        
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                
                component.set("v.contacts", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);

	}
})

<aura:application extends="force:slds"
                  access="global">
    
    <c:RadioButtons/>
    
</aura:application>
I am able to display radio button for every contact name but I am able to select multiple records.
I need to fire the change event when I select one contact record.

also other than <ui:radiobutton> what other component can we use?
thanks
sheila