[SalesForce] lightning:RadioGroup inside aura:iteration

I'm attempting to generate a lightning:radioGroup selection inside my data table, I have a object returning a List<String> but it isn't giving me the styling, it's spitting out the data correct.

<aura:iteration items="{!v.column.selectOptionRow}" var="option" indexVar="idx"> 
    <lightning:radioGroup aura:id="radioGrp- + idx" name="radioButtonGroup" label="{!option.radioLabel}" options="{!option.radioValue}" value="{!v.radioGrpValue}" onchange="{! c.handleRadioGroupChange}"/>
</aura:iteration>

And it appears like this

Am I going about this wrong

Best Answer

lightning:radioGroup is a self-contained element that expects an attribute named "options" to be set. What you're doing is basically showing a bunch of "empty" radio groups.

If you want to use an iteration, specify lightning:input type="radio" name="radioGroup". Each radio group item must have the same name. Note that aura:id cannot be dynamically rendered, so don't bother trying.

<aura:iteration items="{!v.column.selectOptionRow}" var="option" indexVar="idx"> 
    <lightning:input aura:id="assignmentOptions" name="radioButtonGroup" label="{!option.radioLabel}" type="radio" options="{!option.radioValue}" value="{!v.radioGrpValue}" onchange="{! c.handleRadioGroupChange}"/>
</aura:iteration>

If you want to use lightning:radioGroup, then simply specify the options in an attribute:

<lightning:radioGroup aura:id="assignmentOptions" name="radioButtonGroup" options="{!v.column.selectOptionRow}" value="{!v.radioGrpValue}" onchange="{! c.handleRadioGroupChange}"/>

(Note: I haven't carefully checked all the attributes, some additional tweaking may be needed. Please check the documentation.)

Related Solutions

[SalesForce] Handler change not working with attribute updated inside aura:iteration

I was facing a similar issue and I found a workaround for this.

Parent component

<aura:component>
   <aura:attribute name="lstAddresses" type="Address__c[]" access="global"/>
   <aura:handler name="change" value="{!v.lstAddresses}" action="{!c.itemsChange}"/>
   <aura:if isTrue="{!v.showAddAddress}">
         <c:AddEditAddress myObject="{'sobjectType': 'Address__c'}" lstAddresses="{!v.lstAddresses}"  />
      </aura:if>
</aura:component>

Child component

<aura:component>
   <aura:attribute name="lstAddresses" type="Address__c[]" access="global"/>
</aura:component>

Here I have just cut short the code, which is sufficient enough to clear the doubt So Here in the controller js of child component I was adding a address object in the list aura attribute, but the handler for lstAddresses change event was not firing, inshort some how the bidirectional binding was not working as expected

I just updated my code section little bit where I was performing push on the list like this

var lstAddresses = JSON.parse(JSON.stringify(component.get("v.lstAddresses")));
lstAddresses.push(addressObj);
component.set("v.lstAddresses",lstAddresses);

I found that now the change event handler of parent component gets called in init as well as on pushing a new address record from child component. So may be it is the case that in case of collection we have to use this way. Let me know if that worked for you

[SalesForce] aura:if inside aura:iteration

Are you trying to run the list only for the Contact Ids which are included in the list.

You can include them in the list by creating null check in the apex controller. Or you can check them in the Javascript controller. Suppose lets assume that you are trying to return a Wrapper list. Forgive me for my syntax. this is just a code snippet. Use as per your convenience.

Consider,

public class Sample(){
    @AuraEnabled
    global static string getWrapperValues(){
        List<ContactWrap> wrapList = new list<ContactWrap>();

        for(Contact c : your list){ // run your contactlist
        ContactWrap cw = new ContactWrap();
        cw.theContact = c;
        wrapList.add(cw);
        }
    }
    return JSON.serialize(wrapList);
}
public list ContactWrap{
    @AuraEnabled
    public Contact theContact {get;set;}
}

js Controller :

({  
    doInit : function(Component){
        var action = component.get("c.getWrapperValues");

        // set your params for action if any 

        action.setCallBack(this,function(response){
            var output = response.getReturnValue();
            var wrapper = JSON.parse(output);
            for(var i=0;i<wrapper.length;i++){
                var arrVar = wrapper[i];
                console.log('ID**'+arrVar.theContact.Id);
                if(arrVar.theContact.Id){
                    // set your list 
                    component.set("v.yourListAttributeName",wrapper);
                }
                else{
                    // show custom errors
                }
            }
        });
        $A.enqueueAction(action);
    }
})

Best Answer

Related Solutions

[SalesForce] Handler change not working with attribute updated inside aura:iteration

[SalesForce] aura:if inside aura:iteration

Related Topic