You need to sign in to do that
Don't have an account?
sheila srivatsav
radio button for each contact record in lightning component
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.
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
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
Greetings to you!
You can use lightning:datatable to display radio buttons. Please try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement.
Component:
Controller:
Apex:
If you want to use SLDS data table then I suggest please refer to the below links which might help you further.
https://techevangel.com/2018/05/06/lightning-datatable-with-single-checkbox-selection/
https://developer.salesforce.com/forums/?id=9060G0000005b0nQAA
I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.
Thanks and Regards,
Khan Anas